/* La altura de la barra y la del logo las fija una sola hoja,
   components/navbar/navbar.css. Aquí había una medida propia que solo
   no se notaba porque esa hoja se carga después y la pisaba. Si el
   orden cambiaba —o el navegador servía una versión cacheada— esta
   pantalla volvía a su medida y la barra quedaba más alta o más baja
   que en el resto. Se quita para que no dependa de quién gane. */
/* ────────────────────────────────────────────────────────────
   ESTA HOJA YA NO REDEFINE LA PALETA.

   Tenía dos bloques :root —oscuro y claro— con copias de los
   tokens de la casa, y con los valores VIEJOS: --text-3 era
   rgba(20,23,26,.44), que sobre blanco da 2,8 de contraste. Como
   esta hoja se carga después de tokens.css, ganaba, y dejaba 43
   textos por debajo del mínimo en esta pantalla. Los mismos
   tokens ya corregidos en tokens.css dan 6,9 en oscuro y 4,7 en
   claro.

   Es el mismo arreglo que se le hizo a components/panel/panel.css
   en la auditoría de diseño; esta hoja se quedó atrás.

   Lo que sigue aquí son los tokens PROPIOS de la notaría
   (--success-green y compañía), que no existen en tokens.css.
   ──────────────────────────────────────────────────────────── */

/* ── Tinta sobre los fondos de color ──────────────────────────
   Estas dos las traía la paleta local que se quitó (--white y
   --dark-text) y, al irse, `color: var(--white)` se quedaba sin
   valor y heredaba el texto normal: texto oscuro sobre magenta y
   sobre dorado, a 2,8 de contraste.

   No son colores fijos: dependen del tema, porque --gold es claro
   en oscuro (#FFF6D9) y oscuro en claro (#7A5E18). La tinta tiene
   que ir al revés que su fondo. */
:root {
  --tinta-oro:     #14171A;   /* sobre --gold claro  */
  --tinta-magenta: #FFFFFF;   /* sobre --magenta     */
  --tinta-azul:    #9CC4F0;   /* sobre el chip azul al 20 % */

  /* --magenta-soft solo existe en tokens.css dentro del bloque
     [data-producto="tramite"], y esta pantalla no lleva ese atributo:
     al quitar la paleta local, los tres bordes que lo usaban se
     volvieron declaraciones inválidas y el borde desaparecía. */
  --magenta-soft: #F9AEDC;
}
:root[data-theme="light"] {
  --tinta-oro: #FFFFFF;       /* --gold pasa a ser oscuro */
  --tinta-azul: #1F4A85;
  --magenta-soft: #E07CC0;   /* el rosa claro no se ve sobre fondo blanco */
}



/* ================================================================
   NEW LAW V2.0 - SISTEMA DUAL (OSCURO / CLARO)
   Sistema cromático institucional de RUTH.il
   Optimizado para móvil con distribución lado a lado
   Con correcciones para modo oscuro y fechas responsive
================================================================ */

/* ================================================================
   TRANSICIONES GLOBALES PARA CAMBIO DE TEMA
================================================================ */
body, .navbar-ruth, .workspace, .solicitud-card, .btn, .filtros-bar, .cita-form, .cita-info-cliente, .fecha-opcion, .toast-custom {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ================================================================
   01 · VARIABLES MODO OSCURO (POR DEFECTO)
================================================================ */
:root {
  --footer-bg: #07080A;
  
  



  --success-green: #1A7A3E;
  --success-green-hover: #158A45;
  --success-green-rgb: 26, 122, 62;

  --doc-resaltado-bg: #1A2B3C;
  --doc-resaltado-color: #B8CFE0;
  --doc-resaltado-border: #4A6A8A;
  --doc-resaltado-hover-bg: #203548;
  --doc-resaltado-rgb: 74, 106, 138;

  --cat-empresa: #B3D4FF;
  --cat-persona: #FF5C5C;
  --cat-abogado: #A9F5C8;
  --cat-notaria: #CFC0FF;
}

:root[data-theme="light"] {
  --footer-bg: #EFEAE0;
  
  



  --success-green: #1A7A3E;
  --success-green-hover: #158A45;
  --success-green-rgb: 26, 122, 62;

  --doc-resaltado-bg: #E8EEF5;
  --doc-resaltado-color: #3A5A7A;
  --doc-resaltado-border: #B8CFE0;
  --doc-resaltado-hover-bg: #DCE5F0;
  --doc-resaltado-rgb: 58, 90, 122;

  --cat-empresa: #2E6FD9;
  --cat-persona: #D62F2F;
  --cat-abogado: #178C4E;
  --cat-notaria: #6B46E8;
}

:root {
  --papel: var(--bg);
  --humo: var(--bg-2);
  --humo-oscuro: var(--bg-3);
  --ink: var(--text-1);
  --gris: var(--text-2);
  --gris-suave: var(--border);
  --accent: var(--magenta);
  --accent-rgb: var(--magenta-rgb);
  --step-done: var(--success-green);
  --warning: var(--cat-persona);
  --f-body: 'Manrope', 'Archivo', system-ui, sans-serif;
  --f-display: 'Manrope', 'Archivo', system-ui, sans-serif;
}

/* ================================================================
   RESET & BASE
================================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--f-body);
    background: var(--papel);
    color: var(--ink);
    min-height: 100vh;
    padding-bottom: 60px;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--humo); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: var(--gris); }

/* ================================================================
   NAVBAR & LOGO
================================================================ */
.navbar-ruth {
    position: fixed;
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
    background: var(--papel);
    border-bottom: 1px solid var(--gris-suave);
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.nav-left {
    display: flex;
    align-items: center;
}

.nav-logo { display: inline-block; }
.nav-logo img { width: auto; object-fit: contain; }

:root:not([data-theme="light"]) .nav-logo .logo-light { display: none; }
:root:not([data-theme="light"]) .nav-logo .logo-dark { display: block; }
:root[data-theme="light"] .nav-logo .logo-dark { display: none; }
:root[data-theme="light"] .nav-logo .logo-light { display: block; }

/* ================================================================
   BOTONES DEL NAVBAR
================================================================ */
.nav-btn {
    font-family: var(--f-body);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gris);
    text-decoration: none;
    padding: 10px 18px;
    border: 1px solid var(--gris-suave);
    background: transparent;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.nav-btn i { font-size: 0.95rem; }
.nav-btn:hover {
    border-color: var(--magenta);
    color: var(--magenta);
    transform: translateY(-1px);
    background: rgba(var(--magenta-rgb), 0.04);
}
.nav-btn-active {
    border-color: var(--magenta);
    color: var(--magenta);
    background: rgba(var(--magenta-rgb), 0.06);
}

/* Dropdown */
/* ================================================================
   TOGGLE SWITCH DE TEMA
================================================================ */
/* ================================================================
   WORKSPACE Y ENCABEZADO
================================================================ */
.workspace {
    padding: clamp(90px, 10vh, 110px) clamp(16px, 2vw, 40px) 30px;
    max-width: 1280px;
    margin: 0 auto;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gris-suave);
}

.page-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    font-family: var(--f-display);
}

.page-header h1 i { margin-right: 10px; color: var(--magenta); }
.page-subtitle { color: var(--gris); font-size: 0.9rem; margin: 0; }

.badge-count {
    background: var(--gold);
    color: var(--tinta-oro);
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    border: 1.5px solid var(--gold-border);
}

/* ================================================================
   FILTROS Y BÚSQUEDA
================================================================ */
.filtros-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--humo);
    border: 1px solid var(--gris-suave);
    border-radius: 12px;
    align-items: center;
}

.filtro-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gris);
    font-weight: 600;
    margin-right: 4px;
}

.btn-filtro {
    background: transparent;
    border: 1px solid var(--gris-suave);
    color: var(--gris);
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-filtro:hover { border-color: var(--magenta); color: var(--magenta); }
.btn-filtro.active {
    background: var(--magenta);
    color: var(--tinta-magenta);
    border-color: var(--magenta);
}

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--papel);
    border: 1px solid var(--gris-suave);
    border-radius: 30px;
    padding: 6px 18px 6px 14px;
    margin-left: auto;
}

.search-box input {
    background: transparent;
    border: none;
    color: var(--ink);
    padding: 8px 0;
    font-size: 0.85rem;
    width: 180px;
    outline: none;
}

.search-box input::placeholder { color: var(--gris); }
.search-box i { color: var(--gris); font-size: 1rem; }

/* ================================================================
   BADGE DE TIPO DE TRÁMITE
================================================================ */
.badge-tipo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 12px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.badge-tipo i { font-size: 0.7rem; }

.badge-tipo.vehiculo {
    background: rgba(255, 237, 168, 0.2);
    color: var(--gold-ink);
    border: 1px solid var(--gold);
}

.badge-tipo.declaracion {
    background: rgba(179, 212, 255, 0.2);
    /* Por tema: el mismo azul da 5,47 sobre la tarjeta clara y 1,69
       sobre la oscura, donde el chip era prácticamente ilegible. */
    color: var(--tinta-azul);
    border: 1px solid var(--cat-empresa);
}

.badge-tipo.default {
    background: rgba(201, 204, 206, 0.2);
    color: var(--gris);
    border: 1px solid var(--gris-suave);
}

/* ================================================================
   TARJETAS DE SOLICITUD
================================================================ */
.solicitud-card {
    background: var(--papel);
    border: 1px solid var(--gris-suave);
    border-radius: 14px;
    /* Antes 24px/28px y 20px de separación. Con 31 solicitudes, cada tarjeta
       medía más de 300px de alto y recorrer la bandeja eran ocho pantallas
       de scroll. Al quitar los campos repetidos cabe holgadamente en menos
       espacio. */
    padding: 18px 22px;
    margin-bottom: 14px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.solicitud-card:hover {
    border-color: var(--magenta);
    box-shadow: 0 8px 30px rgba(var(--magenta-rgb), 0.08);
}

.card-header-sol {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.card-header-sol .titulo {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ink);
}

.card-header-sol .titulo i { margin-right: 8px; color: var(--magenta); }

.card-header-sol .titulo .placa-muted {
    font-weight: 400;
    color: var(--gris);
    font-size: 0.82rem;
    margin-left: 8px;
}

/* ESTADOS DINÁMICOS */
.estado {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 16px;
    border-radius: 30px;
    font-weight: 600;
}

.estado-pendiente {
    background: rgba(214, 47, 47, 0.1);
    color: var(--cat-persona);
    border: 1px solid var(--cat-persona);
}

.estado-agendado {
    background: rgba(46, 111, 217, 0.1);
    color: var(--cat-empresa);
    border: 1px solid var(--cat-empresa);
}

.estado-completado {
    background: rgba(26, 122, 62, 0.1);
    color: var(--success-green);
    border: 1px solid var(--success-green);
}

/* ================================================================
   INFO GRID
================================================================ */
.info-grid {
    display: grid;
    /* Cuatro datos cortos: caben en una fila en escritorio. */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px 20px;
    margin: 10px 0 0;
}

.info-grid .item {
    font-size: 0.9rem;
    color: var(--ink);
}

.info-grid .item strong {
    color: var(--gris);
    font-weight: 500;
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}

.info-grid .item span {
    color: var(--ink);
    font-weight: 600;
    word-break: break-word;
}

/* ================================================================
   FECHAS PROPUESTAS - DISTRIBUCIÓN DINÁMICA
================================================================ */

/* El contenedor de fechas ocupa todo el ancho */
/* Lista de fechas - por defecto en columna (móvil) */
.fechas-lista {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 4px !important;
}

/* Cada fecha individual */
.fecha-item {
    display: block !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    font-size: 0.85rem !important;
}

/* ================================================================
   EN PC (≥769px): Fechas en fila con distribución simétrica
================================================================ */
@media (min-width: 769px) {
    .fechas-lista {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 16px !important;
        width: 100% !important;
    }
    
    .fecha-item {
        flex: 1 1 0% !important;
        text-align: center !important;
        white-space: nowrap !important;
        font-size: 0.9rem !important;
        padding: 0 8px !important;
    }
}

/* ================================================================
   EN TABLET Y MÓVIL (≤768px): Fechas en columna
================================================================ */
@media (max-width: 768px) {
    .fechas-lista {
        flex-direction: column !important;
        gap: 6px !important;
    }
    
    .fecha-item {
        text-align: left !important;
        font-size: 0.8rem !important;
        line-height: 1.8 !important;
        white-space: normal !important;
    }
}

/* ================================================================
   EN MÓVIL PEQUEÑO (≤480px)
================================================================ */
@media (max-width: 480px) {
    .fechas-lista {
        gap: 4px !important;
    }
    
    .fecha-item {
        font-size: 0.75rem !important;
        line-height: 1.6 !important;
    }
}

/* ================================================================
   ACCIONES Y BOTONES
================================================================ */
.acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--gris-suave);
}

.btn {
    font-size: 0.85rem;
    padding: 8px 20px;
    border-radius: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.btn-outline-accent {
    color: var(--magenta);
    border: 1px solid var(--magenta);
    background: transparent;
}
.btn-outline-accent:hover {
    background: var(--magenta);
    color: var(--tinta-magenta);
    border-color: var(--magenta);
}

.btn-accent {
    background: var(--magenta);
    color: var(--tinta-magenta);
    border: none;
}
.btn-accent:hover {
    background: var(--magenta-deep);
    color: var(--tinta-magenta);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(var(--magenta-rgb), 0.25);
}

/* ================================================================
   BOTÓN MARCAR COMPLETADO
================================================================ */
.btn-success-dark {
    background: var(--success-green) !important;
    color: var(--tinta-magenta) !important;
    border: none !important;
    transition: all 0.3s ease;
}

.btn-success-dark:hover {
    background: var(--success-green-hover) !important;
    color: var(--tinta-magenta) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(var(--success-green-rgb), 0.3);
}

.btn-success-dark i,
.btn-success-dark .bi,
.btn-success-dark svg,
.btn-success-dark * {
    color: var(--tinta-magenta) !important;
}

/* ================================================================
   LA CITA — CONFIRMADA O PROPUESTA
   ================================================================
   Cuando la notaría ya designó una fecha, esa fecha es lo importante de la
   tarjeta y se muestra destacada. Mientras no la haya, se ven las tres que
   propuso el cliente, que es sobre lo que hay que decidir. Nunca las dos
   cosas a la vez: si ya está elegida, las propuestas sobran. */
.bloque-cita {
    /* Se ajusta a su contenido en vez de estirarse a todo lo ancho de la
       tarjeta: una línea de texto dentro de una banda de 1.200px se lee
       como un hueco vacío. */
    display: inline-flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(var(--magenta-rgb), 0.07);
    border-left: 3px solid var(--magenta);
}
.bloque-cita > i {
    font-size: 1.05rem;
    color: var(--magenta);
    margin-top: 1px;
    flex-shrink: 0;
}
.bloque-cita > div { min-width: 0; }
.bloque-cita strong {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gris);
    margin-bottom: 3px;
}
.bloque-cita > div > span {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
}
.bloque-cita .nota-cita {
    margin-top: 3px;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--gris);
}

/* Las propuestas son varias y aún no hay decisión: tono neutro y en fila. */
.bloque-cita.propuestas {
    background: transparent;
    border-left-color: var(--gris-suave);
}
.bloque-cita.propuestas > i { color: var(--gris); }
.bloque-cita.propuestas .fechas-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-weight: 500;
}
.bloque-cita.propuestas .fecha-item {
    font-size: 0.84rem;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--gris-suave);
    color: var(--ink);
    white-space: nowrap;
}

/* Cuántos documentos hay, dentro del propio botón que los abre. */
.cuenta-docs {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
    background: rgba(var(--magenta-rgb), 0.16);
    color: var(--magenta);
}

.sin-documentos {
    text-align: center;
    padding: 26px 16px;
    color: var(--gris);
}
.sin-documentos i { font-size: 1.8rem; display: block; margin-bottom: 8px; opacity: 0.6; }
.sin-documentos p { margin: 0; font-size: 0.88rem; }

/* ================================================================
   DETALLES EXPANDIBLES Y DOCUMENTOS
================================================================ */
.solicitud-detalle {
    display: none;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--gris-suave);
}

.solicitud-detalle.abierto {
    display: block;
    animation: fadeIn 0.3s ease;
}

.solicitud-detalle .seccion { margin-bottom: 24px; }

.solicitud-detalle .seccion h5 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gris);
    margin-bottom: 12px;
    font-weight: 700;
}

/* ================================================================
   ACORDEÓN DE DOCUMENTOS
================================================================ */
.doc-list {
    display: grid;
    /* 300px es el mínimo para que quepan nombre + tipo + los dos botones
       sin que el texto se parta a mitad de palabra. */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 8px;
    align-items: start;
}

.doc-item {
    background: var(--papel);
    border: 1px solid var(--gris-suave);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    transition: all 0.3s ease;
}

.doc-item:hover {
    border-color: var(--magenta);
    background: rgba(var(--magenta-rgb), 0.04);
}

.doc-item i { color: var(--magenta); font-size: 1rem; }
.doc-item .doc-ok { color: var(--success-green); }

/* ================================================================
   DOCUMENTOS RESALTADOS
================================================================ */
.doc-item.resaltado,
.doc-item.destacado,
.doc-item.importante,
.doc-item.prioritario,
.doc-item[style*="background"],
.doc-item[style*="border"],
.doc-item[class*="active"],
.doc-item[class*="selected"],
.doc-item[class*="highlight"],
.doc-item[class*="destacado"],
.doc-item[class*="importante"],
.doc-item[class*="prioridad"],
.doc-item[style*="background-color"],
.doc-item[style*="background:"] {
    background: var(--doc-resaltado-bg) !important;
    border: 1px solid var(--doc-resaltado-border) !important;
    color: var(--doc-resaltado-color) !important;
    font-weight: 500;
    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 0.9;
    filter: none !important;
}

.doc-item.resaltado:hover,
.doc-item.destacado:hover,
.doc-item.importante:hover,
.doc-item.prioritario:hover,
.doc-item[style*="background"]:hover,
.doc-item[style*="border"]:hover,
.doc-item[class*="active"]:hover,
.doc-item[class*="selected"]:hover,
.doc-item[class*="highlight"]:hover,
.doc-item[class*="destacado"]:hover,
.doc-item[class*="importante"]:hover,
.doc-item[class*="prioridad"]:hover,
.doc-item[style*="background-color"]:hover,
.doc-item[style*="background:"]:hover {
    background: var(--doc-resaltado-hover-bg) !important;
    border-color: var(--doc-resaltado-color) !important;
    transform: translateY(-1px);
    opacity: 1;
}

.doc-item.resaltado i,
.doc-item.destacado i,
.doc-item.importante i,
.doc-item.prioritario i,
.doc-item[style*="background"] i,
.doc-item[style*="border"] i,
.doc-item[class*="active"] i,
.doc-item[class*="selected"] i,
.doc-item[class*="highlight"] i,
.doc-item[class*="destacado"] i,
.doc-item[class*="importante"] i,
.doc-item[class*="prioridad"] i,
.doc-item[style*="background-color"] i,
.doc-item[style*="background:"] i {
    color: var(--doc-resaltado-color) !important;
    opacity: 0.8;
}

.doc-item.resaltado span,
.doc-item.destacado span,
.doc-item.importante span,
.doc-item.prioritario span,
.doc-item[style*="background"] span,
.doc-item[style*="border"] span,
.doc-item[class*="active"] span,
.doc-item[class*="selected"] span,
.doc-item[class*="highlight"] span,
.doc-item[class*="destacado"] span,
.doc-item[class*="importante"] span,
.doc-item[class*="prioridad"] span,
.doc-item[style*="background-color"] span,
.doc-item[style*="background:"] span {
    color: var(--doc-resaltado-color) !important;
}

.doc-count {
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--gris);
}

/* ================================================================
   CITA AGENDADA
================================================================ */
.cita-agendada-box {
    background: var(--humo);
    border-radius: 12px;
    padding: 16px 20px;
    border: 1px solid var(--gris-suave);
    margin-top: 12px;
}

.cita-agendada-box h5 {
    color: var(--success-green);
    font-size: 1rem;
    font-weight: 700;
}

.cita-agendada-box .cita-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px 20px;
}

.cita-agendada-box .cita-grid .item strong {
    color: var(--gris);
    font-size: 0.72rem;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cita-agendada-box .cita-grid .item span {
    color: var(--ink);
    font-size: 0.95rem;
}

/* ================================================================
   DESCARGA MASIVA
================================================================ */
.download-section {
    background: rgba(var(--magenta-rgb), 0.06);
    border: 1px solid var(--magenta-soft);
    border-radius: 12px;
    padding: 18px 22px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.download-section .download-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.download-section .download-info i {
    font-size: 2rem;
    color: var(--magenta);
}

.download-section .download-info .info-text { font-size: 0.9rem; }
.download-section .download-info .info-text strong { color: var(--ink); font-size: 0.95rem; }
.download-section .download-info .info-text .doc-count-detail { color: var(--gris); font-size: 0.8rem; }

.btn-download-zip {
    background: var(--magenta);
    color: var(--tinta-magenta);
    border: none;
    padding: 12px 30px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.btn-download-zip:hover {
    background: var(--magenta-deep);
    color: var(--tinta-magenta);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--magenta-rgb), 0.2);
}

.btn-download-zip i { font-size: 1.2rem; color: var(--tinta-magenta); }

/* ================================================================
   FORMULARIO DE CITA
================================================================ */
.cita-form {
    background: var(--humo);
    border: 1px solid var(--gris-suave);
    border-radius: 14px;
    padding: 22px 24px;
    margin-top: 12px;
}

.cita-form h6 {
    margin-bottom: 16px;
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 700;
}

.cita-form .form-control,
.cita-form .form-select {
    background: var(--papel);
    border: 1px solid var(--gris-suave);
    color: var(--ink);
    font-size: 0.9rem;
    padding: 10px 14px;
    border-radius: 10px;
}

.cita-form .form-control:focus,
.cita-form .form-select:focus {
    border-color: var(--magenta);
    box-shadow: 0 0 0 3px rgba(var(--magenta-rgb), 0.1);
    outline: none;
}

.cita-form .form-control::placeholder { color: var(--gris); }

.cita-form label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gris);
    font-weight: 600;
}

/* ================================================================
   CORRECCIONES PARA MODO OSCURO - CITA FORM
================================================================ */
.cita-form input[type="date"],
.cita-form input[type="time"],
.fecha-otra-opcion input[type="date"],
.fecha-otra-opcion input[type="time"] {
    color: var(--ink) !important;
    background-color: var(--papel) !important;
    color-scheme: dark !important;
    padding-right: 40px !important;
    position: relative;
    min-height: 42px;
}

:root[data-theme="light"] .cita-form input[type="date"],
:root[data-theme="light"] .cita-form input[type="time"],
:root[data-theme="light"] .fecha-otra-opcion input[type="date"],
:root[data-theme="light"] .fecha-otra-opcion input[type="time"] {
    color-scheme: light !important;
    background-color: #FFFFFF !important;
}

.cita-form input[type="date"]::-webkit-calendar-picker-indicator,
.cita-form input[type="time"]::-webkit-calendar-picker-indicator,
.fecha-otra-opcion input[type="date"]::-webkit-calendar-picker-indicator,
.fecha-otra-opcion input[type="time"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.cita-form input[type="date"],
.fecha-otra-opcion input[type="date"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FFFFFF' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 18px 18px !important;
}

.cita-form input[type="time"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FFFFFF' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 18px 18px !important;
}

:root[data-theme="light"] .cita-form input[type="date"],
:root[data-theme="light"] .fecha-otra-opcion input[type="date"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E") !important;
}

:root[data-theme="light"] .cita-form input[type="time"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E") !important;
}

/* ================================================================
   TELÉFONO DE CONTACTO - VISIBLE EN MODO OSCURO
================================================================ */
.cita-info-cliente {
    background: var(--papel);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--gris-suave);
}

.cita-info-cliente i { color: var(--magenta); }
.cita-info-cliente p { font-size: 0.9rem; color: var(--ink); margin: 0; }

.cita-info-cliente p strong,
.cita-info-cliente strong,
.cita-info-cliente [style*="color"] {
    color: var(--ink) !important;
    font-weight: 600;
}

.cita-info-cliente *[style*="#0C0E0F"],
.cita-info-cliente *[style*="#0c0e0f"],
.cita-info-cliente *[style*="color: #0C0E0F"],
.cita-info-cliente *[style*="color:#0C0E0F"],
.cita-info-cliente *[style*="color: rgb(12, 14, 15)"] {
    color: var(--ink) !important;
}

/* ================================================================
   FECHAS PROPUESTAS (FORMULARIO)
================================================================ */
.fechas-propuestas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.fecha-opcion {
    background: var(--papel);
    border: 2px solid var(--gris-suave);
    border-radius: 12px;
    padding: 14px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.fecha-opcion:hover {
    border-color: var(--magenta);
    transform: translateY(-2px);
}

.fecha-opcion.seleccionada {
    border-color: var(--success-green);
    background: rgba(var(--success-green-rgb), 0.08);
}

.fecha-opcion.seleccionada .fecha-opcion-selector i {
    color: var(--success-green);
}

.fecha-opcion-dia {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gris);
}

.fecha-opcion-fecha {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    margin: 4px 0;
}

.fecha-opcion-selector i {
    color: var(--gris);
    font-size: 1.2rem;
    transition: color 0.3s;
}

/* ================================================================
   ICONO DE CALENDARIO - MAGENTA
================================================================ */
.fecha-otra-opcion {
    position: relative;
    margin-top: 4px;
}

.fecha-otra-opcion label {
    font-size: 0.78rem;
    color: var(--gris);
    margin-bottom: 4px;
    display: block;
    font-weight: 500;
}

.fecha-otra-opcion .form-control {
    background: var(--papel);
    border: 1px solid var(--gris-suave);
    color: var(--ink);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.9rem;
}

.fecha-otra-opcion .form-control:focus {
    border-color: var(--magenta);
    box-shadow: 0 0 0 3px rgba(var(--magenta-rgb), 0.1);
    background: var(--papel);
    color: var(--ink);
}

.fecha-otra-opcion i.bi-calendar-plus,
.fecha-otra-opcion .bi-calendar-plus,
.fecha-otra-opcion [class*="calendar-plus"] {
    color: var(--magenta) !important;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.fecha-otra-opcion i.bi-calendar-plus:hover,
.fecha-otra-opcion .bi-calendar-plus:hover {
    color: var(--magenta-deep) !important;
    transform: scale(1.1);
}

.cita-seleccionada {
    background: rgba(var(--magenta-rgb), 0.06);
    border: 1px solid var(--magenta-soft);
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 12px;
}

.seleccion-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--ink);
}

.seleccion-info i { font-size: 1.2rem; color: var(--magenta); }

.cita-acciones {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    justify-content: flex-end;
}

.cita-acciones .btn {
    padding: 10px 28px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.cita-acciones .btn-cancelar-cita {
    background: transparent;
    color: var(--gris);
    border: 1px solid var(--gris-suave);
}

.cita-acciones .btn-cancelar-cita:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(214, 47, 47, 0.06);
}

/* ================================================================
   BOTÓN AGENDAR CITA - ICONO BLANCO
================================================================ */
.cita-acciones .btn-agendar {
    background: var(--magenta) !important;
    color: #FFFFFF !important;
    border: none !important;
}

.cita-acciones .btn-agendar i,
.cita-acciones .btn-agendar i.bi,
.cita-acciones .btn-agendar i.bi-calendar-plus,
.cita-acciones .btn-agendar i.bi-calendar-check,
.cita-acciones .btn-agendar i.bi-calendar,
.cita-acciones .btn-agendar i.bi-check,
.cita-acciones .btn-agendar i.bi-check-circle,
.cita-acciones .btn-agendar i.bi-check2,
.cita-acciones .btn-agendar i.bi-check2-circle,
.cita-acciones .btn-agendar svg,
.cita-acciones .btn-agendar [class*="icon"],
.cita-acciones .btn-agendar [class*="calendar"],
.cita-acciones .btn-agendar [class*="check"] {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

.cita-acciones .btn-agendar * {
    color: #FFFFFF !important;
}

.cita-acciones .btn-agendar:hover:not(:disabled) {
    background: var(--magenta-deep) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(var(--magenta-rgb), 0.25);
}

.cita-acciones .btn-agendar:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.fecha-otra-opcion .bi-calendar-plus,
.fecha-otra-opcion i.bi-calendar-plus {
    color: var(--magenta) !important;
}

/* ================================================================
   MENSAJE VACÍO Y TOAST
================================================================ */
.empty-message {
    text-align: center;
    padding: 80px 20px;
    color: var(--gris);
}

.empty-message i {
    font-size: 3.5rem;
    display: block;
    margin-bottom: 16px;
    color: var(--magenta-soft);
}

.empty-message h5 { color: var(--ink); font-size: 1.2rem; font-weight: 600; }
.empty-message p { font-size: 0.95rem; }

.toast-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
}

.toast-custom {
    background: var(--papel);
    border: 1px solid var(--gris-suave);
    color: var(--ink);
    border-radius: 14px;
    padding: 18px 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 280px;
    animation: slideUp 0.4s ease;
    margin-top: 10px;
}

.toast-custom i { font-size: 1.6rem; }
.toast-custom .toast-msg { font-size: 0.95rem; }

.toast-close {
    background: transparent;
    border: none;
    color: var(--gris);
    font-size: 1.3rem;
    cursor: pointer;
    margin-left: auto;
}
.toast-close:hover { color: var(--ink); }

/* ================================================================
   CLASES PARA DETALLE
================================================================ */
.notaria-info {
    background: var(--humo);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 16px;
    border: 1px solid var(--gris-suave);
}

.notaria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 6px 20px;
}

.notaria-grid strong {
    color: var(--gris);
    font-size: 0.7rem;
    text-transform: uppercase;
    display: block;
}

.notaria-grid span { color: var(--ink); }

.fechas-propuestas-detalle {
    background: var(--humo);
    border-radius: 8px;
    padding: 12px 16px;
    border: 1px solid var(--gris-suave);
}

.fechas-propuestas-detalle ul {
    margin: 0;
    padding-left: 20px;
    color: var(--ink);
}

.fechas-propuestas-detalle ul li { margin-bottom: 4px; }
.fechas-propuestas-detalle small { color: var(--gris); display: block; margin-top: 6px; }

/* ================================================================
   GRID 2 COLUMNAS
================================================================ */
.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
}

.campo {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-bottom: none;
}

.campo strong {
    color: var(--gris);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.campo span { color: var(--ink); font-weight: 500; margin-top: 2px; }

/* ================================================================
   ANIMACIONES
================================================================ */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   MEJORAS DE ACCESIBILIDAD
================================================================ */
:focus-visible {
    outline: 2px solid var(--magenta);
    outline-offset: 2px;
}

button, a, .clickable { cursor: pointer; }
label { display: inline-block; margin-bottom: 4px; }
hr { border: 0; border-top: 1px solid var(--gris-suave); margin: 16px 0; }

::selection { background: var(--gold); color: var(--bg); }

/* ================================================================
   CANVAS DE FONDO
================================================================ */
#network-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* ================================================================
   RESPONSIVE - TABLET (768px)
================================================================ */
@media (max-width: 768px) {
    .navbar-ruth {
        padding: 0 12px;
    }
    
    
    
    .nav-btn {
        font-size: 0.6rem;
        padding: 6px 10px;
        letter-spacing: 0.15em;
    }
    
.switch-thumb {
        width: 20px;
        height: 20px;
        top: 2px;
        left: 2px;
    }
    
.workspace { padding: 75px 12px 20px; }
    
    .page-header {
        margin-bottom: 20px;
        padding-bottom: 15px;
        gap: 10px;
    }
    
    .page-header h1 { font-size: 1.2rem; }
    .page-subtitle { font-size: 0.8rem; }
    .badge-count { font-size: 0.75rem; padding: 4px 12px; }
    
    .filtros-bar {
        padding: 12px;
        gap: 8px;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .filtro-label { width: 100%; margin-bottom: 4px; }
    
    .btn-filtro {
        flex: 1;
        min-width: calc(50% - 4px);
        text-align: center;
        justify-content: center;
        padding: 8px 10px;
        font-size: 0.7rem;
    }
    
    .search-box {
        width: 100%;
        margin-left: 0;
        margin-top: 8px;
    }
    
    .search-box input { width: 100%; font-size: 0.8rem; }
    
    .solicitud-card {
        padding: 16px;
        border-radius: 12px;
        margin-bottom: 12px;
    }
    
    .card-header-sol {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .card-header-sol .titulo { font-size: 0.95rem; width: 100%; }
    
    .estado {
        font-size: 0.65rem;
        padding: 3px 10px;
        align-self: flex-start;
    }
    
    .info-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px 12px;
        margin: 8px 0;
    }
    
    .info-grid .item {
        font-size: 0.8rem;
        padding: 0;
    }
    
    .info-grid .item strong {
        font-size: 0.6rem;
        margin-bottom: 1px;
    }
    
    .acciones {
        display: grid;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
    }
    
    .acciones .btn {
        width: 100%;
        justify-content: center;
        padding: 8px 10px;
        font-size: 0.75rem;
        gap: 5px;
    }
    
    .acciones .cita-info {
        grid-column: 1 / -1;
        margin-left: 0;
        justify-content: center;
        font-size: 0.7rem;
    }
    
    
    .doc-list {
        grid-template-columns: 1fr !important;   /* una sola columna: en móvil
                                                    dos dejaban el nombre partido */
        gap: 6px;
    }
    
    .doc-item {
        padding: 8px 10px;
        font-size: 0.75rem;
        gap: 6px;
        border-radius: 8px;
    }
    
    .doc-item i { font-size: 0.9rem; }
    
    .solicitud-detalle { margin-top: 12px; padding-top: 12px; }
    .solicitud-detalle .seccion { margin-bottom: 16px; }
    .solicitud-detalle .seccion h5 { font-size: 0.75rem; margin-bottom: 8px; }
    
    .cita-agendada-box { padding: 12px; }
    
    .cita-agendada-box .cita-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px 12px;
    }
    
    .cita-agendada-box .cita-grid .item strong { font-size: 0.6rem; }
    .cita-agendada-box .cita-grid .item span { font-size: 0.8rem; }
    
    .download-section {
        padding: 12px;
        flex-direction: column;
        align-items: stretch;
    }
    
    .download-section .download-info { justify-content: flex-start; gap: 10px; }
    .download-section .download-info i { font-size: 1.5rem; }
    .btn-download-zip { justify-content: center; padding: 10px 20px; font-size: 0.8rem; }
    
    .cita-form { padding: 16px; border-radius: 10px; }
    .cita-form h6 { font-size: 0.9rem; }
    
    .fechas-propuestas {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px;
    }
    
    .fecha-opcion {
        padding: 8px 4px;
        border-radius: 8px;
        border-width: 1px;
    }
    
    .fecha-opcion-dia { font-size: 0.55rem; }
    .fecha-opcion-fecha { font-size: 0.7rem; margin: 2px 0; }
    .fecha-opcion-selector i { font-size: 0.9rem; }
    
    .cita-acciones { flex-direction: row !important; gap: 8px; }
    
    .cita-acciones .btn {
        flex: 1;
        padding: 8px 12px;
        font-size: 0.75rem;
        justify-content: center;
        gap: 5px;
    }
    
    .grid-2col {
        grid-template-columns: 1fr 1fr !important;
        gap: 4px 12px;
    }
    
    .campo {
        padding: 0;
        border-bottom: none;
    }
    
    .campo strong { font-size: 0.6rem; }
    .campo span { font-size: 0.8rem; }
    
    .toast-custom {
        min-width: auto;
        width: calc(100vw - 24px);
        padding: 14px 16px;
        gap: 10px;
    }
    
    .toast-custom i { font-size: 1.2rem; }
    .toast-custom .toast-msg { font-size: 0.85rem; }
}

/* ================================================================
   RESPONSIVE - MÓVIL PEQUEÑO (480px)
================================================================ */
@media (max-width: 480px) {
    body { font-size: 15px; }
    
    .navbar-ruth { padding: 0 8px; }
    
    
    .nav-btn {
        font-size: 0.5rem;
        padding: 4px 6px;
        gap: 4px;
        border-radius: 6px;
    }
    
    .nav-btn i { font-size: 0.7rem; }
    
    
:root[data-theme="light"] .switch-thumb { transform: translateX(20px); }
    
    .workspace { padding: 65px 8px 15px; }
    .page-header h1 { font-size: 1rem; }
    
    .btn-filtro {
        min-width: 100%;
        font-size: 0.65rem;
        padding: 6px 8px;
    }
    
    .info-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 4px 8px;
    }
    
    .info-grid .item {
        font-size: 0.75rem;
        padding: 0;
    }
    
    .info-grid .item strong {
        font-size: 0.55rem;
        margin-bottom: 1px;
    }
    
    .info-grid .item:first-child {
        grid-column: 1 / -1;
    }
    
    .acciones {
        grid-template-columns: 1fr !important;
    }
    
    
    .doc-list {
        grid-template-columns: 1fr !important;
        gap: 4px;
    }
    
    .fechas-propuestas {
        grid-template-columns: 1fr !important;
        gap: 4px;
    }
    
    .fecha-opcion {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        text-align: left;
    }
    
    .fecha-opcion-dia { font-size: 0.6rem; }
    .fecha-opcion-fecha { font-size: 0.75rem; margin: 0; }
    
    .cita-acciones { flex-direction: column !important; }
    
    .grid-2col {
        grid-template-columns: 1fr 1fr !important;
        gap: 4px 8px;
    }
    
    .campo {
        padding: 0;
        border-bottom: none;
    }
    
    .campo strong { font-size: 0.55rem; }
    .campo span { font-size: 0.75rem; }
    
    .campo:first-child {
        grid-column: 1 / -1;
    }
    
    .cita-agendada-box .cita-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    
    .notaria-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ================================================================
   RESPONSIVE - PANTALLAS GRANDES
================================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .workspace { padding: 85px 20px 25px; }
    .doc-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    .info-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

@media (min-width: 1025px) {
    /* 320px: caben el nombre completo, la etiqueta de tipo y los dos botones */
    .doc-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
    .info-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
/* ================================================================
   DOCUMENTOS DEL TRÁMITE — agrupación y acciones
   (añadido al reorganizar la vista de documentos de la notaría)
================================================================ */

/* Encabezado que separa cada origen: cliente, abogado, documento final */
.doc-grupo {
    grid-column: 1 / -1;
    margin: 10px 0 2px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
}
.doc-grupo:first-child { margin-top: 0; }

/* El nombre ocupa el espacio libre y empuja los botones a la derecha */
.doc-item .doc-nombre {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
    overflow-wrap: break-word;   /* parte entre palabras, no dentro de ellas */
    hyphens: none;
}

/* Etiqueta con el tipo de archivo (PDF, DOCX...) */
.doc-item .doc-ext {
    flex-shrink: 0;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--gris-suave);
    color: var(--muted);
}

/* Botones de ver y descargar */
.doc-item .doc-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--gris-suave);
    color: var(--muted);
    transition: background .15s, color .15s, border-color .15s;
}
.doc-item .doc-btn:hover {
    background: var(--magenta);
    border-color: var(--magenta);
    color: #fff;
}
.doc-item .doc-btn i { font-size: 0.85rem; color: inherit; }

/* Los documentos firmados ocupan la fila entera: son los importantes */
.doc-item.resaltado { grid-column: 1 / -1; }

/* =========================================================
   LAS DOS COLUMNAS: SOLICITUDES Y AGENDA, A LA VEZ
   =========================================================

   POR QUÉ
   -------
   Agendar y consultar la agenda eran dos pantallas. Para poner una
   fecha había que ir al calendario, mirar cómo estaba el día, volver a
   solicitudes y acordarse. La información que hace falta para decidir
   estaba en un sitio y la decisión en otro, y entre las dos había un
   viaje de ida y vuelta que nadie hace más de tres veces sin empezar a
   agendar de memoria.

   Ahora van juntas: la lista a la izquierda, la agenda a la derecha.

   LA PROPORCIÓN NO ES ARBITRARIA
   La columna de solicitudes lleva tarjetas con nombre, documento,
   teléfono y botones; necesita ancho. El calendario es una cuadrícula
   de siete columnas y aguanta bien en poco espacio. De ahí 1,45 contra
   1: el mínimo con el que las casillas del mes siguen siendo cuadradas
   y legibles.
   ========================================================= */

.np-split {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(18px, 2vw, 30px);
  align-items: start;
}

/* La agenda se queda quieta mientras se baja por la lista. Es lo que
   permite mirarla sin perder el sitio en las solicitudes. El tope de
   arriba es el alto de la barra más un respiro. */
.np-col-agenda {
  position: sticky;
  top: clamp(88px, 10vh, 108px);
  /* Que el calendario nunca sea más alto que la ventana: si lo fuera,
     la parte de abajo quedaría fuera y no habría forma de alcanzarla,
     porque el elemento está fijo. */
  max-height: calc(100vh - clamp(104px, 12vh, 128px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.np-agenda-caja {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(14px, 1.4vw, 20px);
}

/* El título y el enlace de "ver en grande", en la misma línea. */
.np-agenda-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.np-agenda-grande {
  font-size: .78rem;
  color: var(--text-3);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.np-agenda-grande:hover,
.np-agenda-grande:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.np-agenda-titulo {
  margin: 0 0 4px;
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text-1);
}

.np-agenda-nota {
  margin: 0 0 16px;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-3);
}

/* Dentro de la columna el calendario tiene menos sitio que cuando
   ocupaba una pantalla entera: las cifras pasan a dos por fila, la
   cabecera se apila, y —lo importante— la cuadrícula del mes y el
   panel del día dejan de ir uno al lado del otro.

   calendar.css los pone en dos columnas (1fr y 340px fijos), que es lo
   correcto con la pantalla entera. En 487px de ancho, esos 340 se
   comen el mes: se veían dos días de los siete. Aquí van uno debajo
   del otro, el mes arriba. */
.np-col-agenda .cal-cuerpo {
  grid-template-columns: 1fr;
  gap: 14px;
}
.np-col-agenda .cal-cifras {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.np-col-agenda .cal-cabecera {
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.np-col-agenda .cal-mes {
  order: -1;
  width: 100%;
  text-align: left;
  font-size: 1rem;
}

/* ---------- PANTALLAS ESTRECHAS ----------
   Por debajo de 1100 las dos columnas dejan de caber sin estrujar las
   tarjetas. Se apilan, y la agenda va ARRIBA: es el contexto que se
   mira antes de decidir, y así no hay que bajar la lista entera para
   encontrarla. Deja de estar fija, porque en una sola columna fijarla
   solo taparía contenido. */
@media (max-width: 1100px) {
  .np-split { grid-template-columns: 1fr; }

  .np-col-agenda {
    position: static;
    max-height: none;
    overflow: visible;
    order: -1;
  }

  .np-col-agenda .cal-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .np-col-agenda .cal-mes { order: 0; width: auto; text-align: center; }
}

@media (max-width: 560px) {
  .np-col-agenda .cal-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .np-col-agenda { scroll-behavior: auto; }
}