/* =========================================================
   Sistema CRUDO — hoja de estilos base.
   Los colores/tipografía/tamaños vienen como variables CSS
   inyectadas por Core\Tema según el tema activo (ver layout).
   No hardcodear colores acá: usar siempre var(--...).
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--fondo-general);
    color: var(--texto-general);
    font-family: var(--fuente);
    font-size: var(--fuente-tamano);
    line-height: 1.45;
}

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

/* ---------- Barra de desplazamiento ---------- */
/* Usa las mismas variables del tema activo, así queda igual de consistente
   que el resto (Firefox: scrollbar-color; Chrome/Edge/Safari: pseudo-elementos). */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primario) var(--fondo-general);
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: var(--fondo-general);
}
*::-webkit-scrollbar-thumb {
    background-color: var(--color-primario);
    border-radius: 999px;
    border: 2px solid var(--fondo-general);
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
    background-color: var(--header-fondo);
}
*::-webkit-scrollbar-corner {
    background: var(--fondo-general);
}

/* El sidebar y el panel de mensajes tienen su propio fondo (no
   --fondo-general): el "track" de su scrollbar se ajusta para mimetizarse
   con ESE fondo en vez de dejar un rectángulo que no combina. */
.crudo-sidebar {
    scrollbar-color: var(--color-primario) var(--sidebar-fondo);
}
.crudo-sidebar::-webkit-scrollbar-track {
    background: var(--sidebar-fondo);
}
.crudo-sidebar::-webkit-scrollbar-thumb {
    border-color: var(--sidebar-fondo);
}
.crudo-panel-mensajes .bloque {
    scrollbar-color: var(--color-primario) var(--panel-secundario);
}
.crudo-panel-mensajes .bloque::-webkit-scrollbar-track {
    background: var(--panel-secundario);
}
.crudo-panel-mensajes .bloque::-webkit-scrollbar-thumb {
    border-color: var(--panel-secundario);
}

/* ---------- Layout general ---------- */

.crudo-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

/* La pantalla interna (sidebar/contenido/panel de mensajes) tiene que quedar
   contenida en el alto de la ventana: si el <body> pudiera scrollear entero,
   el sidebar y el panel de mensajes "se van" con ese scroll en vez de quedar
   fijos y scrollear solo por dentro. Las pantallas standalone (login,
   registro, 404, etc.) NO tienen esta clase y siguen scrolleando normalmente. */
body.pantalla-app {
    overflow: hidden;
}

.crudo-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
    height: 56px;
    background: var(--header-fondo);
    color: var(--header-texto);
    position: sticky;
    top: 0;
    z-index: 50;
}

.crudo-header .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.05em;
    white-space: nowrap;
}

.crudo-header .logo img { height: 26px; display: block; }

.crudo-header .buscador {
    flex: 1;
    max-width: 480px;
}

.crudo-header .buscador input {
    width: 100%;
    padding: 7px 14px;
    border-radius: 999px;
    border: none;
    background: rgba(255,255,255,0.18);
    color: var(--header-texto);
    font-size: 0.95em;
}

.crudo-header .buscador input::placeholder { color: rgba(255,255,255,0.7); }

.crudo-header .ayuda-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--header-texto);
    opacity: 0.75;
    flex-shrink: 0;
    transition: opacity .15s, background .15s;
}

.crudo-header .ayuda-icono:hover {
    opacity: 1;
    background: rgba(255,255,255,0.18);
}

/* Igual que .ayuda-icono, pero para usar SUELTO dentro del contenido de una
   página (ej. al lado de un <h1>) en vez de en el header oscuro — hereda el
   color del texto que lo rodea (currentColor), así funciona con cualquier
   tema de color que tenga el sistema. */
.ayuda-icono-inline {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 10px;
    color: inherit;
    opacity: 0.45;
    transition: opacity .15s;
}

.ayuda-icono-inline:hover { opacity: 1; }

.crudo-header .usuario-actual {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92em;
    white-space: nowrap;
}

.crudo-header .usuario-actual .avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85em; font-weight: 700;
    overflow: hidden;
}

.crudo-header .usuario-actual .avatar img {
    width: 100%; height: 100%; object-fit: cover;
}

.crudo-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* ---------- Sidebar ---------- */

.crudo-sidebar {
    width: 210px;
    flex-shrink: 0;
    background: var(--sidebar-fondo);
    color: var(--sidebar-texto);
    padding: 14px 10px;
    overflow-y: auto;
}

.crudo-sidebar nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--sidebar-texto);
    font-size: 0.95em;
    margin-bottom: 2px;
}

.crudo-sidebar nav a:hover { background: var(--resaltado-fila); text-decoration: none; }

.crudo-sidebar nav a.activo {
    background: var(--sidebar-activo);
    font-weight: 600;
}

.crudo-sidebar .icono { width: 18px; text-align: center; opacity: 0.85; }

/* Menú reordenable: el icono de arrastre de cada opción aparece solo al
   pasar el mouse, a la derecha. Con el menú contraído (solo iconos) o en
   pantallas chicas no se muestra. Pedido de Horacio, 02/10/2026. */
.crudo-sidebar nav a .asa-arrastrar-menu {
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.crudo-sidebar nav a:hover .asa-arrastrar-menu { opacity: 0.55; }
.crudo-sidebar nav a .asa-arrastrar-menu:hover { opacity: 1; }
.crudo-sidebar nav a.arrastrando { outline: 2px dashed var(--sidebar-texto); outline-offset: -2px; }
.crudo-app:not([data-menu="horizontal"])[data-menu-colapsado="1"] .crudo-sidebar nav a .asa-arrastrar-menu { display: none; }

/* Número de una opción del menú (ej. Sugerencias con respuesta nueva). Con el
   menú contraído queda sobre el icono. Pedido de Horacio, 30/10/2026. */
.crudo-sidebar nav a .menu-contador {
    margin-left: auto;
    background: var(--color-peligro, #d94141); color: #fff;
    border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.72em; font-weight: 700; line-height: 1; flex-shrink: 0;
}
.crudo-sidebar nav a .menu-contador + .asa-arrastrar-menu { margin-left: 4px; }
.crudo-app[data-menu="horizontal"] .crudo-sidebar nav a .menu-contador { margin-left: 2px; }
.crudo-app:not([data-menu="horizontal"])[data-menu-colapsado="1"] .crudo-sidebar nav a { position: relative; }
.crudo-app:not([data-menu="horizontal"])[data-menu-colapsado="1"] .crudo-sidebar nav a .menu-contador {
    position: absolute; top: 1px; right: 5px; min-width: 16px; height: 16px; font-size: 0.65em; padding: 0 4px;
}

.btn-restablecer-menu {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 6px 8px;
    background: transparent;
    border: none;
    color: var(--sidebar-texto);
    font-size: 0.78em;
    opacity: 0.55;
    cursor: pointer;
    text-align: left;
}
.btn-restablecer-menu:hover { opacity: 1; text-decoration: underline; }
.crudo-app:not([data-menu="horizontal"])[data-menu-colapsado="1"] .btn-restablecer-menu { display: none; }

/* Botón para contraer/expandir el sidebar a solo iconos — la preferencia
   queda guardada por persona (ver Models\Usuario::actualizarMenuColapsado()
   / Models\Cliente::actualizarMenuColapsado() y el JS "Menú lateral
   colapsable" en base.js). Solo tiene sentido en el menú vertical: en
   horizontal ni se muestra (ver app.php). Pedido de Horacio, 27/09/2026. */
.btn-colapsar-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 0;
    margin-bottom: 8px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--sidebar-texto);
    opacity: 0.6;
    cursor: pointer;
}

.btn-colapsar-menu:hover { opacity: 1; background: var(--resaltado-fila); }

.btn-colapsar-menu .icono-svg { transition: transform 0.15s ease; }

.crudo-app:not([data-menu="horizontal"])[data-menu-colapsado="1"] .crudo-sidebar {
    width: 60px;
}

.crudo-app:not([data-menu="horizontal"])[data-menu-colapsado="1"] .crudo-sidebar nav a span.texto {
    display: none;
}

.crudo-app:not([data-menu="horizontal"])[data-menu-colapsado="1"] .crudo-sidebar nav a {
    justify-content: center;
}

.crudo-app:not([data-menu="horizontal"])[data-menu-colapsado="1"] .btn-colapsar-menu .icono-svg {
    transform: rotate(180deg);
}

/* Contenedor de la fila [contenido | panel de mensajes]: separado del
   sidebar para que, en el menú horizontal (ver más abajo), el sidebar pase
   a ser una barra arriba de TODO el ancho, en vez de quedar apretado al
   costado de esta fila. En el menú vertical (por defecto) esto se comporta
   exactamente igual que antes (sidebar y esta fila lado a lado). */
.crudo-fila-contenido {
    display: flex;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

/* ---------- Menú horizontal (Configuración → Menú de opciones) ---------- */
/* Por defecto el menú es vertical (sidebar a la izquierda, ver arriba). Si
   se elige "Horizontal", el sidebar pasa a ser una barra arriba de todo el
   ancho, con los mismos links en fila — para dejar más espacio de trabajo
   a lo ancho. Pedido de Horacio, 27/09/2026. */
.crudo-app[data-menu="horizontal"] .crudo-body {
    flex-direction: column;
}

.crudo-app[data-menu="horizontal"] .crudo-sidebar {
    width: 100%;
    padding: 6px 16px;
    overflow-x: auto;
    overflow-y: hidden;
}

.crudo-app[data-menu="horizontal"] .crudo-sidebar nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.crudo-app[data-menu="horizontal"] .crudo-sidebar nav a {
    margin-bottom: 0;
}

/* ---------- Apartados desplegables del menú (ej. WOOCOMMERCE) ----------
   Se distinguen de una opción común: cabecera en mayúsculas con líneas
   arriba y abajo, y adentro un título por tienda con sus opciones
   corridas a la derecha. Ver grupoMenuWooCommerce() en app/helpers/menu.php
   y "Apartados del menú" en base.js. Pedido de Horacio, 10/10/2026. */
.menu-grupo {
    margin: 6px 0;
    padding: 4px 0;
    border-top: 1px solid rgba(127,127,127,0.28);
    border-bottom: 1px solid rgba(127,127,127,0.28);
}
.menu-grupo-cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--sidebar-texto);
    font: inherit;
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: left;
    cursor: pointer;
}
.menu-grupo-cabecera:hover { background: var(--resaltado-fila); }
.menu-grupo-flecha { margin-left: auto; opacity: 0.7; transition: transform 0.15s ease; }
.menu-grupo:not(.abierto) .menu-grupo-flecha { transform: rotate(-90deg); }
.menu-grupo-cabecera .asa-arrastrar-menu { margin-left: 2px; opacity: 0; transition: opacity 0.12s ease; }
.menu-grupo-cabecera:hover .asa-arrastrar-menu { opacity: 0.55; }
.menu-grupo-cabecera .asa-arrastrar-menu:hover { opacity: 1; }
.crudo-sidebar nav .menu-grupo.arrastrando { outline: 2px dashed var(--sidebar-texto); outline-offset: -2px; }
.menu-grupo-contenido { display: none; padding: 2px 0 4px; }
.menu-grupo.abierto .menu-grupo-contenido { display: block; }
.menu-grupo-titulo {
    padding: 8px 12px 3px 40px;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.06em;
    opacity: 0.65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crudo-sidebar nav a.menu-grupo-opcion { padding-left: 40px; font-size: 0.9em; }

/* Menú contraído (solo iconos): sin textos, y cada tienda separada por una línea */
.crudo-app:not([data-menu="horizontal"])[data-menu-colapsado="1"] .menu-grupo-cabecera { justify-content: center; }
.crudo-app:not([data-menu="horizontal"])[data-menu-colapsado="1"] .menu-grupo-cabecera .texto,
.crudo-app:not([data-menu="horizontal"])[data-menu-colapsado="1"] .menu-grupo-flecha,
.crudo-app:not([data-menu="horizontal"])[data-menu-colapsado="1"] .menu-grupo-cabecera .asa-arrastrar-menu { display: none; }
.crudo-app:not([data-menu="horizontal"])[data-menu-colapsado="1"] .menu-grupo-titulo { height: 1px; padding: 0; margin: 5px 10px; font-size: 0; background: rgba(127,127,127,0.35); }
.crudo-app:not([data-menu="horizontal"])[data-menu-colapsado="1"] .crudo-sidebar nav a.menu-grupo-opcion { padding-left: 12px; }

/* Menú horizontal: el apartado se abre en la misma fila */
.crudo-app[data-menu="horizontal"] .menu-grupo { display: flex; align-items: center; margin: 0; padding: 0; border: none; }
.crudo-app[data-menu="horizontal"] .menu-grupo-cabecera { width: auto; }
.crudo-app[data-menu="horizontal"] .menu-grupo.abierto .menu-grupo-contenido { display: flex; align-items: center; gap: 4px; padding: 0; }
.crudo-app[data-menu="horizontal"] .menu-grupo-titulo { padding: 0 4px 0 10px; }
.crudo-app[data-menu="horizontal"] .crudo-sidebar nav a.menu-grupo-opcion { padding-left: 12px; }

/* ---------- Panel de mensajes (segunda columna, ocultable) ---------- */

.crudo-panel-mensajes {
    width: 280px;
    flex-shrink: 0;
    background: var(--panel-secundario);
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(127,127,127,0.2);
}

.crudo-panel-mensajes.oculto { display: none; }

.crudo-panel-mensajes .bloque {
    padding: 12px;
    overflow-y: auto;
}

.crudo-panel-mensajes .bloque-contactos { flex: 0 0 45%; border-bottom: 1px solid rgba(127,127,127,0.25); }
.crudo-panel-mensajes .bloque-chat { flex: 1; display: flex; flex-direction: column; }

.crudo-panel-mensajes h3 { margin: 0 0 10px; font-size: 0.95em; }

.crudo-panel-mensajes select.filtro-sector {
    width: 100%;
    margin-bottom: 10px;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid rgba(127,127,127,0.3);
    background: var(--tarjeta-fondo, #fff);
    color: var(--tarjeta-texto, var(--texto-general));
    font-size: 0.85em;
}

.contacto {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 10px;
    background: var(--tarjeta-fondo, #fff);
    color: var(--tarjeta-texto, var(--texto-general));
    margin-bottom: 6px;
    font-size: 0.88em;
    cursor: pointer;
}

.contacto:hover { background: rgba(0,0,0,0.03); }
.contacto.activo { outline: 2px solid var(--color-primario); }

.contacto .avatar-chico {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--color-primario); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.8em; flex-shrink: 0;
}

.badge-no-leidos {
    background: var(--color-peligro, #d94141); color: #fff;
    border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72em; font-weight: 700; flex-shrink: 0;
}

.estado-punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; }
.estado-punto.online { background: var(--color-exito); }
.estado-punto.offline { background: #9aa1a9; }

.chat-mensajes { flex: 1; overflow-y: auto; padding: 4px; }
.chat-burbuja { background: var(--tarjeta-fondo, #fff); color: var(--tarjeta-texto, var(--texto-general)); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; font-size: 0.87em; max-width: 88%; }
.chat-burbuja .quien { font-weight: 700; display: flex; justify-content: space-between; gap: 6px; }
.chat-burbuja .hora { font-weight: 400; opacity: 0.6; font-size: 0.85em; }
.chat-burbuja.mio { background: var(--color-primario); color: #fff; margin-left: auto; }
.chat-burbuja.mio .hora { opacity: 0.75; }

.chat-caja-envio { display: flex; gap: 6px; padding: 10px; }
.chat-caja-envio input {
    flex: 1; border-radius: 999px; border: 1px solid rgba(127,127,127,0.3);
    background: var(--tarjeta-fondo, #fff); color: var(--tarjeta-texto, var(--texto-general));
    padding: 7px 12px; font-size: 0.88em;
}
.chat-caja-envio button {
    border: none; background: var(--header-fondo); color: #fff;
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
}
.chat-caja-envio input:disabled, .chat-caja-envio button:disabled { cursor: not-allowed; }

/* ---------- Dashboard "Sectores de la empresa" (lado cliente) ---------- */

.grid-sectores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.tarjeta-sector {
    background: var(--tarjeta-fondo, #fff);
    color: var(--tarjeta-texto, var(--texto-general));
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
}

.tarjeta-sector img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    display: block;
}

.tarjeta-sector-cuerpo { padding: 14px; }
.tarjeta-sector-cuerpo h3 { margin: 0 0 8px; font-size: 1.05em; }
.tarjeta-sector-cuerpo p { margin: 0 0 8px; font-size: 0.9em; }
.tarjeta-sector-cuerpo .dato-contacto { opacity: 0.85; }

/* ---------- Contenido principal ---------- */

.crudo-contenido {
    flex: 1;
    padding: 22px 26px;
    overflow-y: auto;
    min-width: 0;
}

.crudo-contenido h1 {
    font-size: 1.25em;
    letter-spacing: 0.02em;
    margin: 0 0 18px;
}

.tarjeta {
    background: var(--tarjeta-fondo, #fff);
    color: var(--tarjeta-texto, var(--texto-general));
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.tarjeta-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.tarjeta-cabecera h2 { font-size: 1.05em; margin: 0; }

.subtitulo-seccion {
    font-size: 0.95em;
    margin: 22px 0 14px;
    padding-top: 16px;
    border-top: 1px solid rgba(127,127,127,0.25);
}

/* ---------- Botones ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid rgba(127,127,127,0.3);
    background: var(--tarjeta-fondo, #fff);
    color: var(--tarjeta-texto, var(--texto-general));
    font-size: 0.88em;
    cursor: pointer;
    font-family: inherit;
}

.btn-primario { background: var(--color-primario); color: #fff; border-color: var(--color-primario); }
.btn-peligro { background: var(--tarjeta-fondo, #fff); color: var(--color-error); border-color: var(--color-error); }
.btn-peligro:hover { background: var(--color-error); color: #fff; }
.btn-peligro.activo { background: var(--color-error); color: #fff; }
/* Botón chico (acciones dentro de tablas: Compras, lista de precios del proveedor) */
.btn-chico { padding: 4px 10px; font-size: 0.8em; }

/* Fila de un pedido marcado como prioridad (tabla "Pedidos pendientes" del Dashboard) */
tr.fila-prioridad { background: color-mix(in srgb, var(--color-error) 12%, transparent) !important; }
tr.fila-prioridad:hover { background: color-mix(in srgb, var(--color-error) 22%, transparent) !important; }

body[data-estilo-boton="pill"] .btn { border-radius: 999px; }
body[data-estilo-boton="redondeado"] .btn { border-radius: 8px; }
body[data-estilo-boton="cuadrado"] .btn { border-radius: 3px; }

/* ---------- Reportes: opciones como botones grandes ---------- */

.grid-reportes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.btn-reporte {
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 20px 14px;
    border-radius: 12px;
    font-size: 0.95em;
    font-weight: 600;
    color: var(--texto-general);
}

.btn-reporte:hover {
    background: var(--resaltado-fila, rgba(0,0,0,0.04));
    text-decoration: none;
    border-color: var(--color-primario);
}

.btn-reporte small { font-weight: 400; opacity: 0.7; display: block; margin-top: 2px; }

.btn-reporte .asa-arrastrar-reporte { position: absolute; top: 8px; right: 8px; }

/* ---------- Cajas y tarjetas ordenables (arrastrar y soltar) ---------- */
/* El icono de arrastre: opaco por defecto, bien visible al pasar el mouse.
   Es lo único desde donde se puede empezar a arrastrar una caja/tarjeta —
   ver el JS "Cajas y tarjetas ordenables" en base.js. */
.asa-arrastrar {
    display: inline-flex;
    cursor: grab;
    opacity: 0.35;
    flex-shrink: 0;
}

.asa-arrastrar:hover { opacity: 0.9; }

.caja-stat-titulo .asa-arrastrar { margin-left: auto; }

/* La caja/tarjeta que se está arrastrando en este momento. */
[data-pantalla-ordenable] > [draggable="true"] { cursor: grabbing; }

.arrastrando { opacity: 0.4; }

/* ---------- Dashboard: cajas con números en vivo ---------- */

.grid-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.caja-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid rgba(127,127,127,0.25);
    background: var(--tarjeta-fondo, #fff);
    color: var(--tarjeta-texto, var(--texto-general));
}

.caja-stat .caja-stat-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
    font-weight: 600;
    opacity: 0.75;
}

.caja-stat .caja-stat-numero {
    font-size: 1.9em;
    font-weight: 700;
    color: var(--color-primario);
    line-height: 1.15;
}

.caja-stat .caja-stat-detalle {
    font-size: 0.92em;
    line-height: 1.4;
    opacity: 0.8;
}

.caja-stat.caja-stat-proximamente { opacity: 0.65; }

/* Caja de alerta "Pedidos nuevos sin ver" (pedido que un cliente ingresó
   solo, todavía no revisado por el staff) — mismo look que las demás cajas
   pero con un borde/fondo violeta para que resalte y no se pierda entre el
   resto. Pedido de Horacio, 27/09/2026. */
.caja-stat.caja-stat-nueva {
    border-color: color-mix(in srgb, #7c3aed 45%, transparent);
    background: color-mix(in srgb, #7c3aed 8%, var(--tarjeta-fondo, #fff));
}
.caja-stat.caja-stat-nueva .caja-stat-numero { color: #7c3aed; }

/* Caja de tarea vencida (Dashboard): fondo rojo suave para que se vea en
   cualquier tema. Pedido de Horacio, 18/10/2026. */
/* .caja-stat-pagos-vencidos: «A pagar a proveedores» con pagos vencidos (Compras, 25/10/2026) */
.caja-stat.caja-stat-vencida, .caja-stat.caja-stat-pagos-vencidos {
    border-color: color-mix(in srgb, var(--color-error, #d32f2f) 50%, transparent);
    background: color-mix(in srgb, var(--color-error, #d32f2f) 10%, var(--tarjeta-fondo, #fff));
}
.caja-stat.caja-stat-vencida .caja-stat-titulo, .caja-stat.caja-stat-pagos-vencidos .caja-stat-titulo { color: var(--color-error, #d32f2f); }
.caja-stat .caja-stat-tarea { font-size: 1.05em; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.caja-stat .caja-stat-acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; padding-top: 4px; }
.caja-stat .btn-link-ocultar {
    background: none; border: 0; padding: 4px 0; cursor: pointer;
    color: inherit; opacity: .75; font: inherit; font-size: .85em; text-decoration: underline;
}
.caja-stat .btn-link-ocultar:hover { opacity: 1; }

/* Caja "Hoy en el calendario" (Dashboard e Inicio de los clientes). Pedido de Horacio, 23/10/2026. */
.caja-stat.caja-stat-calendario {
    border-color: color-mix(in srgb, #2f7de1 45%, transparent);
    background: color-mix(in srgb, #2f7de1 8%, var(--tarjeta-fondo, #fff));
}
.caja-stat.caja-stat-calendario .caja-stat-titulo { color: #2f7de1; }
.caja-stat .caja-cal-hoy { list-style: none; margin: 2px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.caja-stat .caja-cal-hoy li { display: flex; align-items: baseline; gap: 7px; font-size: .92em; line-height: 1.3; }
.caja-stat .caja-cal-hoy li.paso { opacity: .5; }
.caja-stat .caja-cal-hoy .punto { flex: none; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-1px); }
.caja-stat .caja-cal-hoy .cuadro { flex: none; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 3px; opacity: .6; transform: translateY(-1px); }
.caja-stat .caja-cal-hoy .hora { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.caja-stat .caja-cal-hoy .txt { overflow-wrap: anywhere; }
.caja-stat .caja-cal-hoy .icono-svg { opacity: .6; flex: none; }
.caja-stat .caja-cal-hoy small { opacity: .65; }
.caja-stat .caja-cal-hoy small.sector { display: block; font-size: .85em; }

/* Caja de Gmail de un sector con correos sin leer: fondo azul suave. Pedido de Horacio, 20/10/2026. */
.caja-stat.caja-stat-gmail.con-correo {
    border-color: color-mix(in srgb, #1a73e8 50%, transparent);
    background: color-mix(in srgb, #1a73e8 10%, var(--tarjeta-fondo, #fff));
}
.caja-stat.caja-stat-gmail.con-correo .caja-stat-numero,
.caja-stat.caja-stat-gmail.con-correo .caja-stat-titulo { color: #1a73e8; }
/* Correo de cada sector (casilla del dominio) en el Dashboard. Pedido de Horacio, 30/10/2026. */
.caja-stat.caja-stat-correo.con-correo {
    border-color: color-mix(in srgb, var(--color-primario, #1b2b42) 45%, transparent);
    background: color-mix(in srgb, var(--color-primario, #1b2b42) 7%, var(--tarjeta-fondo, #fff));
}
.caja-stat .correo-ultimos { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.caja-stat .correo-ultimos li { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.caja-stat .correo-ultimos strong { font-size: .9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caja-stat .correo-ultimos span { font-size: .85em; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caja-stat .correo-ultimos small { font-size: .75em; opacity: .6; }

/* Caja "Dólar hoy" (Dashboard). Pedido de Horacio, 19/10/2026. */
.caja-stat .tabla-dolar { width: 100%; border-collapse: collapse; font-size: .92em; }
.caja-stat .tabla-dolar th { font-size: .78em; font-weight: 600; opacity: .6; text-align: right; padding: 0 0 4px; }
.caja-stat .tabla-dolar td { padding: 4px 0; border-top: 1px solid rgba(127,127,127,.18); text-align: right; white-space: nowrap; }
.caja-stat .tabla-dolar td:first-child, .caja-stat .tabla-dolar th:first-child { text-align: left; padding-right: 10px; }
.caja-stat .tabla-dolar td + td { padding-left: 10px; }

/* Título en negrita para la integración que está configurada Y funcionando
   (consultó bien la API, con o sin resultados) — las que todavía no están
   configuradas, no están conectadas, o dieron error, quedan como antes. */
.caja-stat .caja-stat-titulo.titulo-activo {
    font-weight: 800;
    opacity: 1;
}

.caja-stat table.tabla-mini {
    width: 100%;
    font-size: 0.78em;
    border-collapse: collapse;
    margin-top: 2px;
}

.caja-stat table.tabla-mini td {
    padding: 2px 0;
    border-bottom: 1px solid rgba(127,127,127,0.18);
}

/* ---------- Tablas ---------- */

table.tabla-datos {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92em;
}

table.tabla-datos th {
    text-align: left;
    padding: 9px 10px;
    color: var(--tarjeta-texto, var(--texto-general));
    opacity: 0.65;
    font-weight: 600;
    font-size: 0.85em;
    border-bottom: 1px solid rgba(127,127,127,0.25);
}

table.tabla-datos td {
    padding: 10px 10px;
    border-bottom: 1px solid rgba(127,127,127,0.18);
}

body[data-estilo-tabla="zebra"] table.tabla-datos tbody tr:nth-child(even) { background: var(--resaltado-fila); }
body[data-estilo-tabla="lineas"] table.tabla-datos tbody tr { border-bottom: 1px solid rgba(127,127,127,0.25); }
body[data-estilo-tabla="compacta"] table.tabla-datos td,
body[data-estilo-tabla="compacta"] table.tabla-datos th { padding: 5px 8px; }

table.tabla-datos tbody tr:hover { background: var(--resaltado-fila); }

.tag-estado {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.82em;
    font-weight: 600;
}
.tag-estado.activo { color: var(--color-exito); background: color-mix(in srgb, var(--color-exito) 15%, transparent); }
.tag-estado.inactivo { color: var(--color-error); background: color-mix(in srgb, var(--color-error) 15%, transparent); }
.tag-estado.pagado { color: var(--color-exito); background: color-mix(in srgb, var(--color-exito) 15%, transparent); }
.tag-estado.impago { color: var(--color-error); background: color-mix(in srgb, var(--color-error) 15%, transparent); }
.tag-estado.parcial { color: #b8860b; background: rgba(184,134,11,0.15); }
/* Pedido Listo/Terminado ya incluido en un remito ("REMITADO", naranja) y
   pedido Entregado (celeste) — para diferenciarlos del verde genérico de
   "trabajo terminado". Pedido de Horacio, 25/09/2026. */
.tag-estado.remitado { color: #c2660c; background: rgba(194,102,12,0.15); }
.tag-estado.entregado { color: #1a7fb0; background: rgba(26,127,176,0.15); }
/* Pedido ingresado por el cliente y todavía no visto por el staff (ver
   /pedidos y la caja "Pedidos nuevos sin ver" del Dashboard). Violeta para
   no confundirse con Prioridad (rojo). Pedido de Horacio, 27/09/2026. */
.tag-estado.nuevo { color: #7c3aed; background: rgba(124,58,237,0.15); }
/* Lo que marcó el cliente en Mis pedidos: su prioridad (rosa, para no
   confundirse con la PRIORIDAD del equipo, roja) y el orden que pidió.
   Pedido de Horacio, 20/10/2026. */
.tag-estado.prioridad-cliente { color: #db2777; background: rgba(219,39,119,0.13); }
.tag-estado.orden-del-cliente { color: inherit; background: rgba(127,127,127,0.15); font-weight: 600; }
.orden-cliente { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

/* Botón Calendario del encabezado (al lado de Venta de mostrador): en pantallas chicas queda solo el ícono. Pedido de Horacio, 21/10/2026. */
@media (max-width: 900px) { .btn-header-calendario span { display: none; } }

/* ---------- Selector de temas: tarjetas con vista previa en miniatura de
   los colores del tema, en vez de un <select> con solo el nombre. Pedido
   de Horacio, 23/09/2026 (ver selectorDeTemas() en app/helpers/functions.php). */
.temas-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 4px 0 6px;
}
.tema-tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 108px;
    cursor: pointer;
    padding: 8px;
    border-radius: 10px;
    border: 2px solid transparent;
}
.tema-tarjeta:hover { background: rgba(127,127,127,0.08); }
.tema-tarjeta input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.tema-tarjeta-preview {
    width: 92px;
    height: 62px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
}
.tema-tarjeta-header { height: 16px; flex-shrink: 0; }
.tema-tarjeta-cuerpo { flex: 1; display: flex; }
.tema-tarjeta-sidebar { width: 22px; flex-shrink: 0; }
.tema-tarjeta-contenido { flex: 1; display: flex; align-items: flex-end; justify-content: flex-end; padding: 4px; }
.tema-tarjeta-chip { width: 16px; height: 16px; border-radius: 50%; }
.tema-tarjeta-nombre { font-size: 0.8em; text-align: center; line-height: 1.2; }
.tema-tarjeta:has(input:checked) {
    border-color: var(--color-primario);
    background: color-mix(in srgb, var(--color-primario) 12%, transparent);
    font-weight: 600;
}
.tema-tarjeta:has(input:checked) .tema-tarjeta-preview {
    box-shadow: 0 0 0 2px var(--color-primario);
}

/* ---------- Formularios ---------- */

.campo { margin-bottom: 14px; }
.campo label { display: block; margin-bottom: 5px; font-size: 0.88em; font-weight: 600; }
.campo input, .campo select, .campo textarea {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(127,127,127,0.3);
    background: var(--tarjeta-fondo, #fff);
    color: var(--tarjeta-texto, var(--texto-general));
    font-size: 0.92em;
    font-family: inherit;
}

/* Las casillas de verificación van al lado de su texto, no ocupando todo el ancho */
.campo input[type="checkbox"], .campo input[type="radio"] { width: auto; margin-right: 6px; vertical-align: middle; }

.campo input[type="file"] {
    border: none;
    padding: 4px 0;
    background: transparent;
    width: auto;
}

.campo input[type="file"]::file-selector-button,
.campo input[type="file"]::-webkit-file-upload-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 8px;
    border: 1px solid rgba(127,127,127,0.3);
    background: var(--tarjeta-fondo, #fff);
    color: var(--tarjeta-texto, var(--texto-general));
    font-size: 0.88em;
    cursor: pointer;
    font-family: inherit;
    margin-right: 10px;
    transition: background .15s;
}

.campo input[type="file"]::file-selector-button:hover,
.campo input[type="file"]::-webkit-file-upload-button:hover {
    background: var(--resaltado-fila, rgba(0,0,0,0.05));
}

body[data-estilo-boton="pill"] .campo input[type="file"]::file-selector-button,
body[data-estilo-boton="pill"] .campo input[type="file"]::-webkit-file-upload-button { border-radius: 999px; }
body[data-estilo-boton="cuadrado"] .campo input[type="file"]::file-selector-button,
body[data-estilo-boton="cuadrado"] .campo input[type="file"]::-webkit-file-upload-button { border-radius: 3px; }

/* Grilla de campos: en formularios más anchos, los campos cortos se acomodan
   en columnas en vez de quedar uno debajo del otro estirados a lo ancho de
   toda la tarjeta. Un campo con .campo-ancho ocupa toda la fila (textareas,
   archivos, checkboxes/listas largas, etc). */
.grid-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 18px;
}
.grid-campos .campo-ancho { grid-column: 1 / -1; }

.campo-clave { position: relative; display: flex; }
.campo-clave input[type="password"],
.campo-clave input[type="text"] { flex: 1; padding-right: 34px; }
.campo-clave .btn-ojo {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    margin: 0;
    cursor: pointer;
    color: #8892a0;
    display: flex;
    line-height: 0;
}
.campo-clave .btn-ojo:hover { color: var(--color-primario); }
.campo-clave .btn-ojo.activo { color: var(--color-primario); }

.alerta { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 0.9em; }
.alerta-ok { background: color-mix(in srgb, var(--color-exito) 15%, transparent); color: var(--color-exito); }
.alerta-error { background: color-mix(in srgb, var(--color-error) 15%, transparent); color: var(--color-error); }

/* ---------- Login ---------- */

.pantalla-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--fondo-general);
}

.caja-login {
    background: var(--tarjeta-fondo, #fff);
    color: var(--tarjeta-texto, var(--texto-general));
    padding: 32px 34px;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 340px;
}

.caja-login h1 { font-size: 1.15em; margin: 0 0 20px; text-align: center; }

@media (max-width: 900px) {
    .crudo-app:not([data-menu="horizontal"]) .crudo-sidebar { width: 60px; }
    .crudo-app:not([data-menu="horizontal"]) .crudo-sidebar nav a span.texto { display: none; }
    .crudo-app[data-menu="horizontal"] .crudo-sidebar nav a span.texto { display: none; }
    .crudo-sidebar nav a .asa-arrastrar-menu, .btn-restablecer-menu { display: none; }
    .crudo-app:not([data-menu="horizontal"]) .menu-grupo-cabecera { justify-content: center; }
    .crudo-app:not([data-menu="horizontal"]) .menu-grupo-cabecera .texto,
    .menu-grupo-flecha, .menu-grupo-cabecera .asa-arrastrar-menu { display: none; }
    .crudo-app:not([data-menu="horizontal"]) .menu-grupo-titulo { height: 1px; padding: 0; margin: 5px 10px; font-size: 0; background: rgba(127,127,127,0.35); }
    .crudo-app:not([data-menu="horizontal"]) .crudo-sidebar nav a.menu-grupo-opcion { padding-left: 12px; }
    .crudo-panel-mensajes { position: fixed; right: 0; top: 56px; bottom: 0; z-index: 40; }
}

/* Reportes: al imprimir se oculta todo el chrome de la app y solo queda el
   contenido (ver resources/views/reportes/*). */
.solo-imprimir { display: none; }

.membrete-impresion { margin-bottom: 16px; }
.membrete-impresion img { max-height: 70px; display: block; }
.membrete-impresion strong { font-size: 1.4em; }

/* ---------- Imagen ampliable (click para ver grande en una pantalla
   emergente) — para confirmar, antes de pedir, que la foto del producto es
   la que corresponde. Cualquier <img> con esta clase se amplía al
   clickearla (ver base.js). Pedido de Horacio, 01/10/2026. */
img.imagen-ampliable { cursor: zoom-in; }

.modal-imagen-ampliada {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.modal-imagen-ampliada.visible { display: flex; }
.modal-imagen-ampliada img {
    max-width: 90vw;
    max-height: 88vh;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.modal-imagen-ampliada .cerrar-modal-imagen {
    position: absolute;
    top: 18px;
    right: 24px;
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.modal-imagen-ampliada .cerrar-modal-imagen:hover { background: rgba(255, 255, 255, 0.3); }

@media print {
    /* Margen del @page en 0: así el navegador no reserva espacio para su
       propio encabezado/pie (fecha, título de la pestaña, URL, nº de
       página). El margen visual de la hoja se recrea con padding en
       .crudo-contenido más abajo. */
    @page {
        margin: 0;
    }
    .crudo-header, .crudo-sidebar, .crudo-panel-mensajes, .no-imprimir {
        display: none !important;
    }
    .crudo-body {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .crudo-contenido {
        display: block !important;
        margin: 0 !important;
        padding: 14mm 12mm !important;
    }
    body { background: #fff !important; }
    .solo-imprimir { display: block !important; }
    /* Todo el texto en negro sólido al imprimir: los colores de tema y las
       opacidades usadas para atenuar texto en pantalla quedan muy claros
       sobre fondo blanco impreso. */
    * {
        color: #000 !important;
        opacity: 1 !important;
    }
}