/* Sami Postres - Estilos modernos 3D - Paleta teal + Fractal postres */
:root {
    /* Patrón fractal hexágonos (panal/postre) */
    --sami-fractal-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'%3E%3Cpath fill='rgba(0,137,123,0.08)' fill-rule='evenodd' d='M28 0l28 16v32l-28 16L0 48V16L28 0zM0 16l28 16v16L0 48V16zm56 0v16l-28 16V32L56 16zM28 0l28 16-28 16L0 16 28 0z'/%3E%3C/svg%3E");
    --sami-fractal-dots: radial-gradient(circle at 25% 25%, rgba(0,137,123,0.18) 2px, transparent 2px), radial-gradient(circle at 75% 75%, rgba(0,105,92,0.14) 1px, transparent 1px);
    --sami-fractal-spiral: repeating-radial-gradient(circle at 0 0, transparent 0, rgba(38,166,154,0.12) 20px, transparent 40px);
    --sami-primary: #00897B;
    --sami-primary-dark: #00695C;
    --sami-secondary: #26A69A;
    --sami-success: #4caf50;
    --sami-danger: #f44336;
    --sami-warning: #ff9800;
    --sami-dark: #333;
    --sami-light: #f5f5f5;
    --sami-white: #fff;
    --sami-sidebar-width: 260px;
    --sami-shadow: 0 2px 10px rgba(0,0,0,0.1);
    --sami-shadow-3d: 0 20px 60px rgba(0,137,123,0.25), 0 8px 25px rgba(0,0,0,0.15);
    --sami-radius: 12px;
    --sami-transition: 0.3s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; background: var(--sami-light); color: var(--sami-dark); line-height: 1.6; }

/* ========== FRACTAL MODERNO - Postres ========== */
/* Patrón panal/hexágonos - inspiración miel y repostería */
.sami-fractal-bg {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
    background-image: var(--sami-fractal-dots);
    background-size: 40px 40px, 60px 60px;
    opacity: 1;
}
.sami-fractal-hex {
    position: absolute; inset: 0; z-index: 0; opacity: 0.85;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='rgba(0,137,123,0.32)' stroke-width='0.9'%3E%3Cpath d='M14 0l14 8.1v16.2L14 32.4 0 24.3V8.1L14 0z'/%3E%3Cpath d='M0 24.3l14 8.1v16.2L0 32.4V24.3z'/%3E%3Cpath d='M14 0l14 8.1v16.2L14 32.4V16.2L28 8.1V0H14z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 56px 49px;
}
.sami-fractal-overlay {
    position: absolute; inset: 0; z-index: 0;
    background: var(--sami-fractal-spiral);
    background-size: 100% 100%;
    pointer-events: none;
}
.sami-fractal-wrapper { position: relative; }

/* Login - Diseño 3D con ilustración */
.sami-login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--sami-primary) 0%, var(--sami-primary-dark) 50%, #004D40 100%);
}
.sami-login-bg {
    position: fixed; inset: 0; z-index: 0; overflow: hidden;
}
.sami-login-bg .sami-fractal-hex {
    opacity: 0.55; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='0.8'%3E%3Cpath d='M14 0l14 8.1v16.2L14 32.4 0 24.3V8.1L14 0z'/%3E%3Cpath d='M0 24.3l14 8.1v16.2L0 32.4V24.3z'/%3E%3Cpath d='M14 0l14 8.1v16.2L14 32.4V16.2L28 8.1V0H14z'/%3E%3C/g%3E%3C/svg%3E");
}
.sami-login-shape {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4;
    animation: float 15s infinite ease-in-out;
}
.sami-login-shape.sh1 {
    width: 400px; height: 400px; background: rgba(255,255,255,0.2);
    top: -10%; left: -10%; animation-delay: 0s;
}
.sami-login-shape.sh2 {
    width: 300px; height: 300px; background: rgba(255,193,7,0.3);
    bottom: -5%; right: -5%; animation-delay: -7s;
}
.sami-login-marcador {
    position: absolute; width: 80px; height: auto; opacity: 0.2;
    animation: float 12s infinite ease-in-out;
}
.sami-login-marcador.m1 { top: 20%; right: 15%; animation-delay: -3s; }
.sami-login-icono {
    position: absolute; width: 150px; height: auto; opacity: 0.15;
    bottom: 10%; left: 10%; animation: float 18s infinite ease-in-out;
}
@keyframes float {
    0%, 100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(20px,-20px) scale(1.05); }
}
.sami-login-card {
    background: var(--sami-white); padding: 2.5rem; border-radius: 20px; position: relative;
    box-shadow: var(--sami-shadow-3d); max-width: 400px; width: 100%;
    position: relative; z-index: 1;
    transform-style: preserve-3d; transition: var(--sami-transition);
}
.sami-login-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 70px rgba(0,137,123,0.3), 0 10px 30px rgba(0,0,0,0.2);
}
.sami-login-header {
    text-align: center; margin-bottom: 2rem;
}
.sami-login-logo {
    max-width: 120px; height: auto; margin-bottom: 0.5rem; display: block; margin-left: auto; margin-right: auto;
}
.sami-login-icono-small {
    width: 48px; height: auto; margin-bottom: 0.5rem; display: block; margin-left: auto; margin-right: auto; opacity: 0.9;
}
.sami-login-header h1 { font-size: 1.75rem; color: var(--sami-dark); font-weight: 700; }
.sami-login-header p { font-size: 0.9rem; color: #666; }
.sami-login-form label {
    display: flex; align-items: center; gap: 12px; margin-bottom: 1rem;
    background: var(--sami-light); padding: 12px 16px; border-radius: 8px;
}
.sami-login-form label i { color: #999; width: 20px; }
.sami-login-form input {
    flex: 1; border: none; background: transparent; font-size: 1rem; outline: none;
}
.sami-login-form button {
    width: 100%; padding: 14px; background: var(--sami-primary); color: white;
    border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; margin-top: 0.5rem;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.sami-login-form button:hover { background: var(--sami-primary-dark); }
.sami-login-error {
    background: #ffebee; color: var(--sami-danger); padding: 10px; border-radius: 8px;
    margin-bottom: 1rem; font-size: 0.9rem; display: flex; align-items: center; gap: 8px;
}
.sami-login-hint { text-align: center; font-size: 0.85rem; color: #666; margin-top: 1rem; }
.sami-login-back { text-align: center; margin-top: 1rem; font-size: 0.9rem; }
.sami-login-back a { color: var(--sami-primary); text-decoration: none; }
.sami-login-back a:hover { text-decoration: underline; }

/* Admin layout - Fractal en sidebar y contenido */
.sami-admin .sami-sidebar {
    position: fixed; left: 0; top: 0; width: var(--sami-sidebar-width); height: 100vh;
    background: linear-gradient(180deg, var(--sami-primary) 0%, var(--sami-primary-dark) 100%);
    color: white; padding: 20px; overflow-y: auto;
}
.sami-sidebar > * { position: relative; z-index: 1; }
.sami-sidebar-header {
    text-align: center; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.2);
}
.sami-sidebar-brand {
    display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.sami-sidebar-logo {
    max-width: 48px; height: auto; border-radius: 8px; flex-shrink: 0;
}
.sami-sidebar-header h2 { font-size: 1.3rem; }
.sami-sidebar-header span { font-size: 0.75rem; opacity: 0.9; display: block; }
.sami-sidebar-menu { list-style: none; margin-top: 20px; }
.sami-sidebar-menu a {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    color: white; text-decoration: none; border-radius: 8px; margin-bottom: 4px;
}
.sami-sidebar-menu a:hover, .sami-sidebar-menu a.active { background: rgba(255,255,255,0.2); }
.sami-main-content {
    margin-left: var(--sami-sidebar-width); padding: 24px; min-height: 100vh;
    position: relative;
}
.sami-main-content::before {
    content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: var(--sami-sidebar-width);
    z-index: -1; pointer-events: none;
    background-image: radial-gradient(circle at 20% 30%, rgba(0,137,123,0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(38,166,154,0.1) 0%, transparent 40%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='rgba(0,137,123,0.18)' stroke-width='0.7'%3E%3Ccircle cx='20' cy='20' r='1'/%3E%3Ccircle cx='0' cy='0' r='0.5'/%3E%3Ccircle cx='40' cy='40' r='0.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%, 100% 100%, 80px 80px;
}
.sami-sidebar::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='35' viewBox='0 0 20 35'%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.28)' stroke-width='0.6' d='M10 0l10 5.8v11.6L10 23.2 0 17.4V5.8L10 0z'/%3E%3C/svg%3E");
    background-size: 40px 35px; opacity: 1;
}
.sami-page-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;
}
.sami-page-header h1 { font-size: 1.5rem; }
.sami-btn { padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer;
    font-size: 0.95rem; display: inline-flex; align-items: center; gap: 8px;
}
.sami-btn-primary { background: var(--sami-primary); color: white; }
.sami-btn-primary:hover { background: var(--sami-primary-dark); }
.sami-btn-secondary { background: #666; color: white; }
.sami-btn-danger { background: var(--sami-danger); color: white; }
.sami-card {
    background: white; border-radius: var(--sami-radius); box-shadow: var(--sami-shadow);
    padding: 24px; margin-bottom: 24px;
}
.sami-table { width: 100%; border-collapse: collapse; }
.sami-table th, .sami-table td { padding: 12px; text-align: left; border-bottom: 1px solid #eee; }
.sami-table th { background: var(--sami-light); font-weight: 600; }
.sami-table tr:hover { background: #fafafa; }
.sami-table tr.sami-fila-alerta { background: #ffebee; }
.sami-table tr.sami-fila-proximo { background: #fff8e1; }
.sami-badge {
    display: inline-block; padding: 4px 10px; border-radius: 20px;
    font-size: 0.8rem; font-weight: 500;
}
.sami-badge-success { background: #e8f5e9; color: var(--sami-success); }
.sami-badge-warning { background: #fff3e0; color: var(--sami-warning); }
.sami-badge-danger { background: #ffebee; color: var(--sami-danger); }
.sami-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.sami-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sami-stat-card {
    background: white; padding: 24px; border-radius: var(--sami-radius);
    box-shadow: var(--sami-shadow); text-align: center;
}
.sami-stat-card .stat-value { font-size: 2rem; font-weight: 700; color: var(--sami-primary); }
.sami-stat-card .stat-label { font-size: 0.9rem; color: #666; margin-top: 4px; }
.sami-form-group { margin-bottom: 1rem; }
.sami-form-group label { display: block; margin-bottom: 6px; font-weight: 500; }
.sami-form-group input, .sami-form-group select, .sami-form-group textarea {
    width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem;
}
.sami-form-group input:focus { outline: none; border-color: var(--sami-primary); }
.sami-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.sami-modal-overlay.hidden { display: none; }
.sami-chart-wrap { max-height: 200px; position: relative; }
.sami-chart-wrap canvas { max-height: 200px !important; }

.sami-modal {
    background: white; padding: 24px; border-radius: var(--sami-radius);
    max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto;
}

/* Tienda pública - Diseño 3D + Fractal postres */
.sami-tienda-body { position: relative; min-height: 100vh; overflow-x: hidden; }
.sami-bg-3d {
    position: fixed; inset: 0; z-index: -1; overflow: hidden;
    background: linear-gradient(180deg, #E0F2F1 0%, var(--sami-light) 50%, #B2DFDB 100%);
}
.sami-bg-3d .sami-fractal-hex {
    opacity: 0.9; background-size: 48px 42px;
}
.sami-bg-3d .sami-shape {
    position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5;
    animation: float 20s infinite ease-in-out;
}
.sami-bg-3d .sami-shape.s1 {
    width: 350px; height: 350px; background: rgba(0,137,123,0.2);
    top: -5%; right: -5%; animation-delay: 0s;
}
.sami-bg-3d .sami-shape.s2 {
    width: 280px; height: 280px; background: rgba(38,166,154,0.2);
    bottom: 10%; left: -5%; animation-delay: -10s;
}
.sami-bg-3d .sami-shape.s3 {
    width: 200px; height: 200px; background: rgba(0,105,92,0.15);
    top: 50%; left: 50%; animation-delay: -5s;
}
.sami-marcador {
    position: absolute; width: 60px; height: auto; opacity: 0.25;
    animation: float 14s infinite ease-in-out;
}
.sami-marcador.s1 { top: 15%; left: 8%; animation-delay: -2s; }
.sami-marcador.s2 { bottom: 25%; right: 10%; animation-delay: -8s; }
.sami-tienda { max-width: 1200px; margin: 0 auto; padding: 24px; position: relative; z-index: 1; }
.sami-tienda-header {
    text-align: center; padding: 50px 24px;
    background: linear-gradient(135deg, var(--sami-primary), var(--sami-primary-dark));
    color: white; border-radius: 20px; margin-bottom: 32px; position: relative;
    box-shadow: var(--sami-shadow-3d); overflow: hidden;
}
.sami-tienda-header::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1) 0%, transparent 50%);
}
.sami-tienda-header::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='42' viewBox='0 0 24 42'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.35)' stroke-width='0.7'%3E%3Cpath d='M12 0l12 7v14L12 28 0 21V7L12 0z'/%3E%3Cpath d='M0 21l12 7v14L0 28V21z'/%3E%3Cpath d='M12 0l12 7v14L12 28V14L24 7V0H12z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 48px 42px; opacity: 1;
}
.sami-tienda-header > * { position: relative; z-index: 1; }
.sami-tienda-logo {
    display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px;
}
.sami-logo-img {
    max-width: 100px; height: auto; filter: brightness(0) invert(1);
}
.sami-icono-hero {
    width: 64px; height: auto; opacity: 0.95;
}
.sami-tienda-header h1 { font-size: 2rem; font-weight: 800; margin-bottom: 4px; }
.sami-tienda-header p { opacity: 0.95; margin-bottom: 12px; }
.sami-tienda-links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.sami-tienda-links a {
    color: white; text-decoration: none; padding: 8px 16px; border-radius: 8px;
    background: rgba(255,255,255,0.2); transition: var(--sami-transition);
}
.sami-tienda-links a:hover { background: rgba(255,255,255,0.3); }
.sami-productos-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px;
}
.sami-producto-card {
    background: white; border-radius: 16px; padding: 24px;
    box-shadow: var(--sami-shadow); text-align: center; transition: var(--sami-transition);
    position: relative; overflow: hidden;
}
.sami-producto-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--sami-primary), var(--sami-secondary));
    border-radius: 16px 16px 0 0;
}
.sami-producto-card.sami-card-3d:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--sami-shadow-3d);
}
.sami-producto-icon, .sami-producto-imagen {
    width: 100%; min-height: 160px; margin: 0 auto 12px; border-radius: 12px;
    background: linear-gradient(135deg, #B2DFDB, #80CBC4);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.sami-producto-icon img { width: 40px; height: auto; }
.sami-producto-imagen img {
    width: 100%; height: 160px; object-fit: cover; display: block;
}
.sami-producto-card h3 { margin-bottom: 8px; font-weight: 600; }
.sami-producto-card .precio { font-size: 1.25rem; font-weight: 700; color: var(--sami-primary); }
.sami-producto-card button {
    margin-top: 12px; padding: 12px 20px; background: var(--sami-primary); color: white;
    border: none; border-radius: 10px; cursor: pointer; width: 100%; font-weight: 600;
    transition: var(--sami-transition);
}
.sami-producto-card button:hover { background: var(--sami-primary-dark); transform: scale(1.02); }
.sami-carrito {
    position: fixed; right: 24px; bottom: 24px; background: linear-gradient(135deg, var(--sami-primary), var(--sami-primary-dark));
    color: white; padding: 16px 24px; border-radius: 50px; cursor: pointer;
    box-shadow: var(--sami-shadow-3d); display: flex; align-items: center; gap: 10px;
    transition: var(--sami-transition); z-index: 100;
}
.sami-carrito:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 30px rgba(0,137,123,0.5);
}
.sami-carrito-marcador {
    width: 28px; height: auto; opacity: 0.9;
}
.sami-pedido-form { max-width: 500px; margin: 2rem auto; }
.sami-alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 1rem; }
.sami-alert-success { background: #e8f5e9; color: #2e7d32; }
.sami-alert-danger { background: #ffebee; color: #c62828; }