/* =====================================================================
   DINHELSE CRM · Capa de estilo propia
   =====================================================================

   Hasta ahora no habia ninguna: 1.078 atributos `style="..."` repartidos
   por 50 vistas, con mas de cuarenta colores escritos a mano. La
   consecuencia visible es que el modo oscuro esta roto justo en las
   pantallas que mas se usan —«¿Estas aqui?» pintaba un rectangulo
   blanco con texto azul oscuro en medio de un panel negro—, y la
   invisible es que cambiar un gris obliga a buscarlo en cincuenta
   sitios.

   Esto es un fichero estatico a proposito. El panel no tiene Vite ni
   node, asi que un tema de Filament al uso exigiria montar una cadena de
   compilacion en el servidor. Un CSS servido desde public/ se cachea
   igual, no necesita build, y no puede romper un despliegue.

   DONDE VIVE CADA COSA

   Este fichero tiene la ESTRUCTURA: que un aviso lleve borde, que las
   tarjetas tengan las esquinas a 0,7rem, que en el movil los botones
   midan 44 pixeles. Eso no se toca desde ninguna pantalla.

   Los COLORES viven en la base de datos, en la tabla `estilos`, y se
   inyectan en cada pagina como un bloque <style> con los valores del
   estilo activo. Se editan en Ajustes → Estilos, y cada uno puede
   elegir el suyo en Mi perfil.

   Los valores de :root y .dark que hay aqui abajo son la red de
   seguridad: los que se usan si no hay ningun estilo guardado. Coinciden
   con los de App\Support\Tokens, que es la definicion canonica.

   COMO SE USA

   Los colores NUNCA se escriben en las vistas. Se usa una clase, o en su
   defecto una variable:

       <div class="dh-aviso dh-aviso--info">          ← preferido
       <div style="color: var(--dh-texto-suave)">      ← si hace falta

   Cada variable tiene su pareja en oscuro mas abajo. Usando las
   variables, el modo oscuro sale gratis; escribiendo el color a mano,
   se rompe.
   ===================================================================== */

:root {
    /* Superficies y bordes -------------------------------------------- */
    --dh-superficie: #ffffff;
    --dh-superficie-suave: #f9fafb;
    --dh-borde: #e5e7eb;

    /* Texto ----------------------------------------------------------- */
    --dh-texto: #111827;
    --dh-texto-medio: #374151;
    --dh-texto-suave: #6b7280;

    /* Estados.
       Cuatro y no cuarenta. Informativo (azul), atencion (ambar, que es
       el color del panel), error (rojo) y hecho (verde). Cada uno con
       fondo, borde y texto, para que un aviso sea una clase y no tres
       decisiones. */
    --dh-info-fondo: rgba(59, 130, 246, 0.10);
    --dh-info-borde: rgba(59, 130, 246, 0.25);
    --dh-info-texto: #1e40af;

    --dh-atencion-fondo: rgba(245, 158, 11, 0.12);
    --dh-atencion-borde: rgba(245, 158, 11, 0.30);
    --dh-atencion-texto: #92400e;

    --dh-error-fondo: rgba(220, 38, 38, 0.10);
    --dh-error-borde: rgba(220, 38, 38, 0.28);
    --dh-error-texto: #991b1b;

    --dh-hecho-fondo: rgba(5, 150, 105, 0.10);
    --dh-hecho-borde: rgba(5, 150, 105, 0.28);
    --dh-hecho-texto: #065f46;

    /* Formas ---------------------------------------------------------- */
    --dh-radio: 0.7rem;
    --dh-radio-chico: 0.5rem;
}

/* Filament pone la clase `dark` en <html> al cambiar de tema. */
.dark {
    --dh-superficie: #18181b;
    --dh-superficie-suave: #27272a;
    --dh-borde: #3f3f46;

    --dh-texto: #f4f4f5;
    --dh-texto-medio: #d4d4d8;
    --dh-texto-suave: #a1a1aa;

    /* En oscuro los fondos suben de opacidad y el texto se aclara: un
       azul del 10% sobre negro no se distingue del fondo, y un
       #1e40af sobre negro no se lee. */
    --dh-info-fondo: rgba(59, 130, 246, 0.18);
    --dh-info-borde: rgba(59, 130, 246, 0.40);
    --dh-info-texto: #93c5fd;

    --dh-atencion-fondo: rgba(245, 158, 11, 0.18);
    --dh-atencion-borde: rgba(245, 158, 11, 0.42);
    --dh-atencion-texto: #fcd34d;

    --dh-error-fondo: rgba(220, 38, 38, 0.20);
    --dh-error-borde: rgba(248, 113, 113, 0.42);
    --dh-error-texto: #fca5a5;

    --dh-hecho-fondo: rgba(5, 150, 105, 0.20);
    --dh-hecho-borde: rgba(52, 211, 153, 0.40);
    --dh-hecho-texto: #6ee7b7;
}

/* =====================================================================
   Avisos
   ---------------------------------------------------------------------
   El recuadro de color que se repite por todo el CRM: «¿Estás aquí?»,
   los mensajes de Verificación, los de rutas realizadas. Estaba escrito
   a mano cada vez, con colores distintos cada vez.
   ===================================================================== */

.dh-aviso {
    padding: 1rem 1.15rem;
    border-radius: var(--dh-radio);
    background: var(--dh-info-fondo);
    border: 1px solid var(--dh-info-borde);
}

/* Sin carga: informa de algo que no es bueno ni malo. */
.dh-aviso--neutro   { background: var(--dh-superficie-suave); border-color: var(--dh-borde); }

.dh-aviso--atencion { background: var(--dh-atencion-fondo); border-color: var(--dh-atencion-borde); }
.dh-aviso--error    { background: var(--dh-error-fondo);    border-color: var(--dh-error-borde); }
.dh-aviso--hecho    { background: var(--dh-hecho-fondo);    border-color: var(--dh-hecho-borde); }

.dh-aviso__titulo {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
    color: var(--dh-info-texto);
}

.dh-aviso--neutro   .dh-aviso__titulo { color: var(--dh-texto-medio); }
.dh-aviso--neutro,
.dh-aviso--neutro strong             { color: var(--dh-texto-medio); }

.dh-aviso--atencion .dh-aviso__titulo { color: var(--dh-atencion-texto); }
.dh-aviso--error    .dh-aviso__titulo { color: var(--dh-error-texto); }
.dh-aviso--hecho    .dh-aviso__titulo { color: var(--dh-hecho-texto); }

.dh-aviso__texto {
    font-size: 0.85rem;
    color: var(--dh-texto-medio);
    margin-bottom: 0.8rem;
}

.dh-aviso__pie {
    font-size: 0.78rem;
    color: var(--dh-texto-suave);
    margin-top: 0.7rem;
}

/* =====================================================================
   Elegibles
   ---------------------------------------------------------------------
   Los botones-tarjeta que se pulsan para escoger algo: las candidatas
   de «¿Estás aquí?», y en su momento las paradas de una ruta.
   ===================================================================== */

.dh-elegibles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dh-elegible {
    text-align: left;
    padding: 0.55rem 0.85rem;
    border-radius: var(--dh-radio-chico);
    background: var(--dh-superficie);
    border: 1px solid var(--dh-info-borde);
    color: var(--dh-texto);
    font-size: 0.86rem;
    line-height: 1.35;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.dh-elegible:hover {
    background: var(--dh-superficie-suave);
    border-color: var(--dh-info-texto);
}

/* En el móvil, de pie en la puerta de una farmacia, el dedo necesita
   sitio: 44px es el mínimo que recomienda Apple y el que hace que no
   haya que apuntar. */
@media (max-width: 640px) {
    .dh-elegible {
        min-height: 44px;
        width: 100%;
    }
}

.dh-elegible__detalle {
    color: var(--dh-texto-suave);
}

/* =====================================================================
   Utilidades sueltas
   ===================================================================== */

.dh-suave { color: var(--dh-texto-suave); }
.dh-fila  { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* Anchos de lectura. Una linea de texto muy larga se lee peor: el ojo
   pierde el renglon al volver. 52rem para leer, 56rem para formularios,
   que llevan campos en dos columnas. */
.dh-ancho-lectura   { max-width: 52rem; }
.dh-ancho-formulario { max-width: 56rem; }

/* La muestra en vivo de la pantalla de Estilos. */
.dh-muestra { margin-bottom: 0.75rem; }
.dh-muestra__estado { flex: 1; min-width: 14rem; }
.dh-muestra__nota { margin: 0.5rem 0 1.25rem; }
.dh-sin-margen { margin-bottom: 0; }

/* La franja de botones al pie de un formulario. */
.dh-pie-formulario {
    padding-top: 0.75rem;
    border-top: 1px solid var(--dh-borde);
}
