/* =============================================================================
   Valeria CRM — hoja de estilos
   Identidad: asistente cálida y profesional. Acento iris (violeta) con un toque
   cálido ámbar. Marca tipo "burbuja de chat" porque Valeria es, ante todo, una
   conversación. Tipografías: Fraunces (voz de Valeria, títulos) + Plus Jakarta
   Sans (la parte utilitaria del panel).
   ========================================================================== */

/* ---- Variables de tema ---------------------------------------------------- */
:root {
    --iris:        #6a5af9;
    --iris-fuerte: #5646e6;
    --iris-suave:  #efedff;
    --ambar:       #f6b23e;
    --ok:          #2fb686;
    --error:       #e2565f;

    --radio:       14px;
    --radio-sm:    10px;
    --sombra:      0 10px 30px rgba(24, 22, 55, .10);
    --sombra-fuerte: 0 24px 70px rgba(24, 22, 55, .22);
    --transicion:  .18s ease;

    --fuente-display: "Fraunces", Georgia, "Times New Roman", serif;
    --fuente-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Tema claro (por defecto) */
html[data-tema="claro"] {
    --fondo:        #f5f4fb;
    --fondo-2:      #ecebf6;
    --superficie:   #ffffff;
    --superficie-2: #faf9ff;
    --borde:        #e6e4f1;
    --texto:        #23233a;
    --texto-suave:  #6c6b85;
    --lateral-fondo:#1a1930;
    --lateral-texto:#c9c7e6;
    --lateral-activo:#2a2850;
}

/* Tema oscuro */
html[data-tema="oscuro"] {
    --fondo:        #101020;
    --fondo-2:      #15152a;
    --superficie:   #1a1a30;
    --superficie-2: #20203a;
    --borde:        #2b2b48;
    --texto:        #e9e8f5;
    --texto-suave:  #a2a1bf;
    --lateral-fondo:#0b0b18;
    --lateral-texto:#b9b7d8;
    --lateral-activo:#232244;
    --sombra:       0 10px 30px rgba(0, 0, 0, .35);
    --sombra-fuerte:0 24px 70px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fuente-ui);
    background: var(--fondo);
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

h1, h2, h3 { font-family: var(--fuente-display); font-weight: 600; letter-spacing: -.01em; margin: 0; }

a { color: var(--iris); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Marca (burbuja de chat) --------------------------------------------- */
.marca { display: flex; align-items: center; gap: 12px; padding: 22px 20px; }
.marca__burbuja {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 12px 12px 12px 4px; /* esquina "de burbuja" */
    background: linear-gradient(135deg, var(--iris), var(--iris-fuerte));
    color: #fff; font-family: var(--fuente-display); font-weight: 600; font-size: 20px;
    box-shadow: 0 6px 18px rgba(106, 90, 249, .45);
}
.marca__burbuja--grande { width: 52px; height: 52px; font-size: 26px; border-radius: 16px 16px 16px 5px; }
.marca__texto { font-family: var(--fuente-display); font-size: 19px; color: #fff; font-weight: 600; }

/* =============================================================================
   Layout de la app (menú lateral + contenido)
   ========================================================================== */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }

.lateral {
    background: var(--lateral-fondo);
    color: var(--lateral-texto);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
}
.menu { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; flex: 1; }
.menu__item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: var(--radio-sm);
    color: var(--lateral-texto); font-weight: 500; font-size: 15px;
    transition: background var(--transicion), color var(--transicion);
}
.menu__item:hover { background: var(--lateral-activo); color: #fff; text-decoration: none; }
.menu__item.es-activo { background: var(--lateral-activo); color: #fff; }
.menu__item.es-activo::before {
    content: ""; position: absolute; left: 0; width: 3px; height: 22px;
    background: var(--ambar); border-radius: 0 3px 3px 0; margin-left: -12px;
}
.menu__item { position: relative; }
.menu__icono { width: 20px; text-align: center; }

.lateral__pie { padding: 16px; border-top: 1px solid rgba(255,255,255,.06); }
.empresa-chip {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--lateral-texto);
    background: rgba(255,255,255,.05); padding: 8px 12px; border-radius: var(--radio-sm);
}
.empresa-chip__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }

.principal { display: flex; flex-direction: column; min-width: 0; }

.barra {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 30px; gap: 16px;
    background: var(--superficie); border-bottom: 1px solid var(--borde);
    position: sticky; top: 0; z-index: 5;
}
.barra__titulo h1 { font-size: 22px; }
.barra__acciones { display: flex; align-items: center; gap: 14px; }

.btn-tema {
    border: 1px solid var(--borde); background: var(--superficie-2);
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
    font-size: 16px; line-height: 1; transition: transform var(--transicion);
}
.btn-tema:hover { transform: scale(1.06); }
html[data-tema="claro"] .btn-tema__oscuro { display: none; }
html[data-tema="oscuro"] .btn-tema__claro { display: none; }

.usuario-menu { display: flex; align-items: center; gap: 10px; }
.usuario-menu__avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, var(--iris), var(--iris-fuerte));
    color: #fff; display: grid; place-items: center; font-weight: 700;
}
.usuario-menu__nombre { display: flex; flex-direction: column; font-weight: 600; font-size: 14px; line-height: 1.2; }
.usuario-menu__nombre small { color: var(--texto-suave); font-weight: 500; font-size: 12px; }

.contenido { padding: 30px; flex: 1; max-width: 1100px; width: 100%; }
.pie { padding: 16px 30px; color: var(--texto-suave); font-size: 13px; border-top: 1px solid var(--borde); }

/* =============================================================================
   Componentes
   ========================================================================== */
.tarjeta {
    background: var(--superficie); border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 24px; box-shadow: var(--sombra);
}
.tarjeta + .tarjeta { margin-top: 20px; }
.tarjeta__titulo { font-size: 17px; margin-bottom: 4px; }
.tarjeta__sub { color: var(--texto-suave); font-size: 14px; margin: 0 0 18px; }

/* Rejilla de tarjetas resumen */
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat__valor { font-family: var(--fuente-display); font-size: 32px; font-weight: 600; }
.stat__etiqueta { color: var(--texto-suave); font-size: 14px; }
.stat__icono { font-size: 20px; }

/* Botones */
.btn {
    display: inline-flex; align-items: center; gap: 8px; justify-content: center;
    padding: 11px 18px; border-radius: var(--radio-sm); border: 1px solid transparent;
    font-family: var(--fuente-ui); font-weight: 600; font-size: 14px; cursor: pointer;
    transition: transform var(--transicion), background var(--transicion), box-shadow var(--transicion);
    text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn--primario { background: var(--iris); color: #fff; box-shadow: 0 6px 16px rgba(106,90,249,.35); }
.btn--primario:hover { background: var(--iris-fuerte); transform: translateY(-1px); }
.btn--suave { background: var(--superficie-2); color: var(--texto); border-color: var(--borde); }
.btn--suave:hover { background: var(--fondo-2); }
.btn--peligro { background: transparent; color: var(--error); border-color: var(--error); }
.btn--peligro:hover { background: var(--error); color: #fff; }
.btn--pequeno { padding: 7px 12px; font-size: 13px; }
.btn--bloque { width: 100%; }

/* Formularios */
.campo { margin-bottom: 16px; }
.campo label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.campo .pista { color: var(--texto-suave); font-size: 13px; margin-top: 6px; }
.control {
    width: 100%; padding: 12px 14px; border-radius: var(--radio-sm);
    border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto);
    font-family: var(--fuente-ui); font-size: 15px; transition: border var(--transicion), box-shadow var(--transicion);
}
.control:focus { outline: none; border-color: var(--iris); box-shadow: 0 0 0 3px rgba(106,90,249,.18); }
select.control { appearance: none; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Tabla */
.tabla-envoltura { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tabla th, table.tabla td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--borde); }
table.tabla th { color: var(--texto-suave); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
table.tabla tr:last-child td { border-bottom: none; }
table.tabla tbody tr:hover { background: var(--superficie-2); }

/* Etiquetas de estado / rol */
.pildora { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pildora--iris { background: var(--iris-suave); color: var(--iris-fuerte); }
.pildora--ok { background: rgba(47,182,134,.15); color: var(--ok); }
.pildora--gris { background: var(--fondo-2); color: var(--texto-suave); }

/* Avisos (flash) */
.aviso { padding: 12px 16px; border-radius: var(--radio-sm); margin-bottom: 18px; font-size: 14px; font-weight: 500; border: 1px solid transparent; }
.aviso--ok { background: rgba(47,182,134,.12); color: var(--ok); border-color: rgba(47,182,134,.3); }
.aviso--error { background: rgba(226,86,95,.10); color: var(--error); border-color: rgba(226,86,95,.3); }
.aviso--info { background: var(--iris-suave); color: var(--iris-fuerte); border-color: rgba(106,90,249,.25); }
html[data-tema="oscuro"] .aviso--info { background: rgba(106,90,249,.14); }

/* Encabezado de sección con acción a la derecha */
.seccion-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.seccion-cabecera p { color: var(--texto-suave); margin: 4px 0 0; font-size: 14px; }

/* Estado vacío */
.vacio { text-align: center; padding: 40px 20px; color: var(--texto-suave); }
.vacio__icono { font-size: 34px; }

/* =============================================================================
   Pantalla de login / instalación
   ========================================================================== */
.pantalla-auth {
    min-height: 100vh; display: grid; place-items: center; padding: 24px;
    background:
        radial-gradient(1200px 500px at 100% -10%, rgba(106,90,249,.18), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(246,178,62,.14), transparent 55%),
        var(--fondo);
}
.auth-envoltura { width: 100%; max-width: 420px; }
.auth-tarjeta {
    background: var(--superficie); border: 1px solid var(--borde);
    border-radius: 20px; padding: 32px; box-shadow: var(--sombra-fuerte);
}
.auth-marca { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.auth-marca__nombre { font-family: var(--fuente-display); font-size: 22px; font-weight: 600; }
.auth-marca__lema { color: var(--texto-suave); font-size: 14px; }
.auth-titulo { font-size: 20px; margin-bottom: 4px; }
.auth-sub { color: var(--texto-suave); font-size: 14px; margin: 0 0 22px; }
.auth-nota { text-align: center; color: var(--texto-suave); font-size: 13px; margin-top: 18px; }
.auth-pie-enlace { text-align: center; margin-top: 16px; font-size: 14px; color: var(--texto-suave); }

/* =============================================================================
   Responsive: en móvil el menú lateral pasa a barra superior compacta
   ========================================================================== */
@media (max-width: 820px) {
    .app { grid-template-columns: 1fr; }
    .lateral { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; }
    .marca { padding: 14px 16px; }
    .menu { flex-direction: row; flex: 1 1 100%; overflow-x: auto; padding: 4px 12px 12px; }
    .menu__item.es-activo::before { display: none; }
    .lateral__pie { display: none; }
    .contenido { padding: 20px 16px; }
    .barra { padding: 14px 16px; }
    .fila { grid-template-columns: 1fr; }
    .usuario-menu__nombre { display: none; }
}

/* Accesibilidad: respeta quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }