/* =====================================================================
   Sistema visual Dimeiggs — base reutilizable
   Extraído de Radar de Precios. Sin nada específico de esa aplicación.

   Tipografías: Poppins (títulos e interfaz), Inter (texto),
   IBM Plex Mono (números, códigos y etiquetas). El import va en el HTML.

   Los números siempre con tabular-nums: sin eso las columnas de cifras
   bailan de fila en fila y una tabla de precios se vuelve ilegible.
   ===================================================================== */

:root{
  /* ---------- Marca ---------- */
  --navy:#000E78;        /* color principal: encabezados de tabla, botones, nav activa */
  --navy-deep:#000A54;   /* barra superior y hover del botón principal */
  --gold:#FAB700;        /* acento: subrayado de sección activa, barras de progreso */
  --gold-soft:#FFF4D6;   /* fondo de avisos informativos y estados de advertencia */
  --rhein:#E2231A;       /* rojo de marca Rhein: alertas, bordes críticos */
  --rhein-soft:#FDEAE8;  /* fondo de errores y badges críticos */

  /* ---------- Semánticos ---------- */
  --danger:#B81C14;      /* texto sobre rhein-soft; más oscuro que --rhein para contraste */
  --ok:#12704A;          /* confirmaciones, valores al alza */
  --ok-soft:#E3F3EB;     /* fondo de avisos correctos */
  --warn:#9A6B00;        /* texto sobre gold-soft; el dorado puro no se lee sobre claro */

  /* ---------- Superficies ---------- */
  --bg:#F5F6F8;          /* fondo de la página y de celdas internas */
  --surface:#FFFFFF;     /* tarjetas, tablas, barra de encabezado */
  --line:#E4E6EC;        /* bordes y separadores */

  /* ---------- Texto ---------- */
  --text:#1C2130;        /* texto principal */
  --text-soft:#5B6272;   /* secundario: descripciones, navegación inactiva */
  --text-faint:#9AA0AC;  /* terciario: etiquetas, unidades, estados vacíos */

  /* ---------- Pasteles del tablero ----------
     Cada tarjeta de indicador combina un fondo pastel, una franja superior
     saturada y el texto en el tono oscuro de esa familia. Los pasteles no
     existen como variable en el original —estaban en línea— y se nombran
     acá para poder reutilizarlos fuera de las tarjetas. */
  --pastel-azul:#E0EDFF;   /* con --navy   */
  --pastel-ambar:#FFFAE0;  /* con --gold y texto --warn */
  --pastel-verde:#E4F9F5;  /* con --teal   */
  --pastel-rosa:#FFE8EF;   /* con --rhein y texto --danger */
  --teal:#0F6E68;          /* el verde azulado del tercer indicador */

  /* ---------- Tipografía ---------- */
  --head:'Poppins',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'IBM Plex Mono',monospace;

  /* ---------- Espaciado ----------
     El CSS original no tenía escala: los valores se pusieron a mano caso
     por caso. Esta escala se derivó de los que más se repiten, para que
     una aplicación nueva no herede esa deuda. */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px;
  --e5:20px; --e6:26px; --e7:32px; --e8:48px;

  /* ---------- Radios ---------- */
  --r-xs:4px;   /* badges y etiquetas */
  --r-sm:6px;   /* enlaces de navegación */
  --r-md:8px;   /* campos, avisos */
  --r-lg:10px;  /* tarjetas */
  --r-full:999px;

  /* ---------- Sombras ----------
     Tampoco existían: el original separa por borde y color de fondo, no
     por elevación. Se incluyen por si hacen falta, pero lo coherente con
     el sistema es apoyarse en --line. */
  --s-foco:0 0 0 3px rgba(0,14,120,.10);
  --s-baja:0 1px 2px rgba(28,33,48,.06);
  --s-media:0 4px 12px rgba(28,33,48,.08);
}

/* ===================================================================== */
/* Base                                                                  */
/* ===================================================================== */

*{box-sizing:border-box}

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:14px;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--navy)}

/* Cualquier cifra lleva esta clase. */
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ===================================================================== */
/* Barra superior, encabezado y navegación                               */
/* ===================================================================== */

.topbar{
  background:var(--navy-deep); color:#C9CEEB;
  font-family:var(--mono); font-size:11.5px;
  padding:7px var(--e7);
  display:flex; justify-content:space-between; gap:var(--e4); flex-wrap:wrap;
}
.topbar a{color:#C9CEEB}

.header{
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:10px var(--e7);
  display:flex; align-items:center; gap:var(--e4);
  position:sticky; top:0; z-index:20;
}

.brand{display:flex; align-items:center; gap:13px}
.brand .name{
  font-family:var(--head); font-weight:600; font-size:14.5px; line-height:1.15;
  padding-left:13px; border-left:1px solid var(--line);
}
.brand .name small{
  display:block; font-family:var(--mono); font-size:9.5px;
  color:var(--text-faint); letter-spacing:.05em; text-transform:uppercase;
  margin-top:3px;
}

/* El emblema es un PNG con transparencia. Se declaran ancho y alto en el
   HTML para que no salte el layout mientras carga. */
.isotipo{display:block; object-fit:contain}

nav{margin-left:auto; display:flex; gap:2px; flex-wrap:wrap}
nav a{
  font-family:var(--head); font-weight:500; font-size:12.5px;
  color:var(--text-soft); padding:var(--e2) var(--e3);
  border-radius:var(--r-sm); text-decoration:none;
}
nav a:hover{background:var(--bg); color:var(--navy)}
nav a.on{background:var(--navy); color:#fff}

/* ===================================================================== */
/* Contenedor y títulos                                                  */
/* ===================================================================== */

.wrap{max-width:1440px; margin:0 auto; padding:var(--e6) var(--e7) 60px}
.wrap.lectura{max-width:960px}   /* para vistas de texto, no de datos */

.eyebrow{
  display:inline-block; background:var(--navy); color:var(--gold);
  font-family:var(--head); font-weight:600; font-size:10.5px;
  letter-spacing:.05em; text-transform:uppercase;
  padding:var(--e1) 11px; border-radius:var(--r-xs);
}
h1{font-family:var(--head); font-weight:700; font-size:26px; margin:14px 0 5px}
h2{font-family:var(--head); font-weight:600; font-size:16px; margin:30px 0 var(--e3)}
h3{font-family:var(--head); font-weight:600; font-size:14.5px; margin:0 0 var(--e1)}

.dek{color:var(--text-soft); font-size:14.5px; margin:0 0 22px; line-height:1.6}
.ayuda{font-size:12.5px; color:var(--text-soft); line-height:1.5}
.nota{margin-top:18px; font-size:12.5px; color:var(--text-faint); line-height:1.6}
.sku{font-family:var(--mono); font-size:11px; color:var(--text-faint);
     display:block; margin-top:2px}

/* ===================================================================== */
/* Tarjetas                                                              */
/* ===================================================================== */

.card{background:var(--surface); border:1px solid var(--line);
      border-radius:var(--r-lg)}

/* ---------- Tarjeta de indicador ----------
   Estructura: .card.kpi > .strip + .body > .lab + .val + .sub
   La variante c1 a c4 fija el trío pastel / franja / texto. */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.kpi{padding:0; overflow:hidden; border:0}
.kpi .strip{height:5px}
.kpi .body{padding:15px 18px var(--e4)}
.kpi .lab{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; font-weight:500;
}
.kpi .val{
  font-family:var(--head); font-weight:700; font-size:31px;
  margin:6px 0 3px; font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.kpi .sub{font-size:12px; color:var(--text-soft)}

.kpi.c1 .body{background:var(--pastel-azul)}
.kpi.c1 .strip{background:var(--navy)}
.kpi.c1 .lab, .kpi.c1 .val{color:var(--navy)}

.kpi.c2 .body{background:var(--pastel-ambar)}
.kpi.c2 .strip{background:var(--gold)}
.kpi.c2 .lab, .kpi.c2 .val{color:var(--warn)}

.kpi.c3 .body{background:var(--pastel-verde)}
.kpi.c3 .strip{background:var(--teal)}
.kpi.c3 .lab, .kpi.c3 .val{color:var(--teal)}

.kpi.c4 .body{background:var(--pastel-rosa)}
.kpi.c4 .strip{background:var(--rhein)}
.kpi.c4 .lab, .kpi.c4 .val{color:var(--danger)}

/* ---------- Cifra con dirección ----------
   Barra lateral de color según suba, baje o se mantenga. */
.split{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.dir{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--line); border-radius:0 var(--r-md) var(--r-md) 0;
  padding:15px 17px;
}
.dir .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em;
        text-transform:uppercase; color:var(--text-soft)}
.dir .v{font-family:var(--head); font-weight:700; font-size:27px;
        margin-top:var(--e1); font-variant-numeric:tabular-nums}
.dir.up{border-left-color:var(--ok)}      .dir.up .v{color:var(--ok)}
.dir.down{border-left-color:var(--rhein)} .dir.down .v{color:var(--danger)}
.dir.same{border-left-color:var(--text-faint)} .dir.same .v{color:var(--text-soft)}

/* ---------- Rejilla de datos ----------
   Pares etiqueta / valor sobre fondo gris. Sirve para fichas. */
.datos{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
       gap:10px}
.datos div{background:var(--bg); border-radius:var(--r-md);
           padding:10px var(--e3); display:flex; flex-direction:column; gap:3px}
.datos .k{font-family:var(--mono); font-size:10px; text-transform:uppercase;
          letter-spacing:.05em; color:var(--text-faint)}
.datos .v{font-family:var(--head); font-weight:600; font-size:18px;
          /* Los correos largos desbordaban la tarjeta y quedaban cortados.
             anywhere permite el corte incluso sin espacios, que es
             justamente el caso de una dirección de correo. */
          overflow-wrap:anywhere; min-width:0}
/* Un correo o un teléfono no necesitan el tamaño de una cifra: a 18px
   una dirección ocupa el ancho de tres tarjetas. */
.datos .v a{font-size:14px; font-weight:500; line-height:1.35}

/* ===================================================================== */
/* Tablas                                                                */
/* ===================================================================== */

table{width:100%; border-collapse:collapse; font-size:12.5px;
      background:var(--surface)}
th{
  background:var(--navy); color:#fff; font-family:var(--head);
  font-weight:600; font-size:10.5px; text-align:left; padding:10px 11px;
}
td{padding:10px 11px; border-bottom:1px solid var(--line)}
tbody tr:nth-child(even) td{background:#FAFAFC}
.r{text-align:right}   /* columnas numéricas */

/* Encabezado ordenable: el título es un enlace y la flecha indica sentido. */
th a{color:inherit; text-decoration:none; display:inline-flex;
     align-items:center; gap:var(--e1)}
th a:hover{opacity:.75}
th.orden{background:var(--navy-deep)}
th .flecha{font-size:11px; opacity:.9}

.vacio{padding:var(--e6); text-align:center; color:var(--text-faint);
       font-size:13px}

/* ===================================================================== */
/* Badges de estado                                                      */
/* ===================================================================== */

.b{display:inline-block; font-family:var(--head); font-weight:600;
   font-size:10.5px; padding:3px var(--e2); border-radius:var(--r-xs)}
.b.ok{background:var(--ok-soft); color:var(--ok)}
.b.warn{background:var(--gold-soft); color:var(--warn)}
.b.crit{background:var(--rhein-soft); color:var(--danger)}
.b.navy{background:var(--pastel-azul); color:var(--navy)}
.b.grey{background:#F0F1F4; color:var(--text-soft)}

.chips{display:flex; gap:6px; flex-wrap:wrap}

/* ===================================================================== */
/* Botones                                                               */
/* ===================================================================== */

.btn{
  display:inline-block; font-family:var(--head); font-weight:600;
  font-size:13px; padding:10px var(--e5); border-radius:7px;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
}
.btn.pri{background:var(--navy); color:#fff}
.btn.pri:hover{background:var(--navy-deep)}
.btn.neu{background:var(--surface); color:var(--text-soft); border-color:var(--line)}
.btn.neu:hover{border-color:var(--navy); color:var(--navy)}
.btn.dan{background:var(--surface); color:var(--danger); border-color:var(--rhein)}

.actions{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.toolbar{display:flex; align-items:center; gap:10px; margin-bottom:14px;
         flex-wrap:wrap; }
.spacer{margin-left:auto}

/* ===================================================================== */
/* Avisos                                                                */
/* ===================================================================== */

.aviso{padding:var(--e3) var(--e4); border-radius:var(--r-md);
       margin-bottom:var(--e4); font-size:13.5px; border-left:3px solid}
.aviso.error{background:var(--rhein-soft); border-color:var(--rhein); color:var(--danger)}
.aviso.ok{background:var(--ok-soft); border-color:var(--ok); color:var(--ok)}
.aviso.info{background:var(--gold-soft); border-color:var(--gold); color:var(--warn)}

/* ===================================================================== */
/* Barra secundaria de secciones                                         */
/* ===================================================================== */

.subnav{
  display:flex; gap:2px; background:var(--surface);
  border:1px solid var(--line); border-radius:9px; padding:var(--e1);
  margin-bottom:var(--e5); overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.subnav::-webkit-scrollbar{display:none}
.subnav a{
  font-family:var(--head); font-weight:500; font-size:13px;
  color:var(--text-soft); padding:9px 15px var(--e2);
  border-radius:var(--r-sm); text-decoration:none; white-space:nowrap;
  display:flex; align-items:center; gap:7px;
  border-bottom:2px solid transparent;
}
.subnav a:hover{color:var(--navy); background:var(--bg)}
.subnav a.on{color:var(--navy); font-weight:600;
             border-bottom-color:var(--gold); background:var(--bg)}
.subnav .n{font-family:var(--mono); font-size:10.5px; background:var(--line);
           color:var(--text-soft); padding:1px 6px; border-radius:9px}
.subnav a.on .n{background:var(--navy); color:#fff}

/* ===================================================================== */
/* Controles de formulario                                               */
/* El navegador dibuja los select con su propio estilo, que no tiene nada */
/* que ver con el resto. Se reemplaza: misma tipografía, mismo radio y   */
/* una flecha dibujada en SVG en vez de la del sistema.                  */
/* ===================================================================== */

label{display:block; font-family:var(--head); font-weight:500;
      font-size:12.5px; margin:14px 0 5px}

select, input[type=text], input[type=email], input[type=password],
input[type=number], input[type=search], input[type=date]{
  font-family:var(--body); font-size:13px; color:var(--text);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--e2) var(--e3); line-height:1.4;
  transition:border-color .15s, box-shadow .15s;
}
select:hover, input:hover:not([type=checkbox]):not([disabled]){border-color:#C7CCDA}
select:focus, input:focus{outline:none; border-color:var(--navy);
                          box-shadow:var(--s-foco)}
select[disabled], input[disabled]{background:#F7F8FA; color:var(--text-faint);
                                  cursor:not-allowed; border-color:var(--line)}

select:not([multiple]){
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:var(--e7); cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235B6272' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
}
select:not([multiple]):focus{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23000E78' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select[multiple]{padding:6px; cursor:pointer}
select[multiple] option{padding:5px var(--e2); border-radius:5px}
select[multiple] option:checked{background:var(--navy); color:#fff}

/* Casilla con visto propio: cuadrado navy y check en blanco. */
input[type=checkbox]{
  appearance:none; -webkit-appearance:none; width:17px; height:17px;
  border:1.5px solid #C7CCDA; border-radius:5px; background:var(--surface);
  cursor:pointer; position:relative; flex:none; transition:all .12s;
}
input[type=checkbox]:hover{border-color:var(--navy)}
input[type=checkbox]:checked{background:var(--navy); border-color:var(--navy)}
input[type=checkbox]:checked::after{
  content:''; position:absolute; left:5px; top:1.5px; width:4px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg);
}
input[type=checkbox]:focus-visible{box-shadow:0 0 0 3px rgba(0,14,120,.15)}

/* Un filtro con valor elegido se marca, para que se note sin leerlo. */
.field.activo, input[type=search].activo{
  border-color:var(--navy); background:#F3F5FC; font-weight:600;
}

/* Rango numérico: dos campos que se leen como un solo control. */
.rango{display:inline-flex; align-items:center; gap:6px;
       background:var(--surface); border:1px solid var(--line);
       border-radius:var(--r-md); padding:var(--e1) var(--e2) var(--e1) 11px}
.rango label{font-family:var(--head); font-weight:500; font-size:12px;
             margin:0; color:var(--text-soft)}
.rango input{width:62px; padding:6px var(--e2); font-size:12px;
             border-radius:var(--r-sm)}
.rango span{color:var(--text-faint)}
.rango.activo{border-color:var(--navy); background:#F3F5FC}
.rango.activo label{color:var(--navy); font-weight:600}

/* Buscador ancho. En el teléfono el tipo de 16px evita que iOS haga zoom
   al enfocar el campo, que descoloca toda la pantalla. */
.buscador{display:flex; gap:var(--e2); margin-bottom:var(--e5)}
.buscador input{flex:1; padding:13px 15px; font-size:16px;
                border:1px solid var(--line); border-radius:9px;
                font-family:var(--body)}
.buscador input:focus{outline:2px solid var(--navy); outline-offset:-1px}
.buscador .btn{padding:13px var(--e5)}

/* Formularios en tarjeta: los campos van a ancho completo. Acotado a
   .caja y .card > form a propósito; sin eso, los filtros en línea salían
   estirados a todo el ancho de la página. */
.caja input[type=text], .caja input[type=email], .caja input[type=password],
.card > form input[type=text], .card > form input[type=email],
.card > form input[type=password]{width:100%; padding:10px var(--e3); font-size:14px}

.formulario{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
            gap:var(--e3); align-items:start}
.formulario label{margin:0 0 var(--e1)}
.formulario input[type=text], .formulario input[type=email]{width:100%}

/* ===================================================================== */
/* Paginación                                                            */
/* ===================================================================== */

.paginacion{display:flex; align-items:center; gap:var(--e4); flex-wrap:wrap;
            padding:var(--e3) var(--e1) 0; font-size:12.5px}
.paginacion .cuenta{color:var(--text-soft)}
.paginacion .cuenta b{font-family:var(--mono); color:var(--text)}
.paginacion .tamanos{display:flex; align-items:center; gap:3px}
.paginacion .tamanos label{font-family:var(--head); font-weight:500;
                           font-size:12px; color:var(--text-faint);
                           margin:0 var(--e1) 0 0}
.paginacion .tamanos a{font-family:var(--mono); font-size:11.5px;
                       padding:var(--e1) var(--e2); border-radius:var(--r-sm);
                       text-decoration:none; color:var(--text-soft);
                       border:1px solid var(--line); background:var(--surface)}
.paginacion .tamanos a:hover{border-color:var(--navy); color:var(--navy)}
.paginacion .tamanos a.on{background:var(--navy); border-color:var(--navy); color:#fff}
.paginacion .paginas{display:flex; align-items:center; gap:3px; margin-left:auto}
.paginacion .paginas a, .paginacion .paginas span{
  font-family:var(--mono); font-size:11.5px; padding:5px 9px;
  border-radius:var(--r-sm); text-decoration:none;
  border:1px solid var(--line); background:var(--surface); color:var(--text-soft);
}
.paginacion .paginas a:hover{border-color:var(--navy); color:var(--navy)}
.paginacion .paginas .actual{background:var(--navy); border-color:var(--navy);
                             color:#fff; font-weight:600}
.paginacion .paginas .off{opacity:.35; background:transparent;
                          border-color:transparent}

/* ===================================================================== */
/* Detalle plegable                                                      */
/* ===================================================================== */

details{border-top:1px solid var(--line); margin-top:14px; padding-top:11px}
summary{font-family:var(--head); font-weight:500; font-size:12.5px;
        color:var(--navy); cursor:pointer; list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+ "; color:var(--rhein); font-weight:700}
details[open] summary::before{content:"– "}

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

/* Miniatura junto a un texto, para reconocer algo de un vistazo. */
.con-mini{display:flex; gap:11px; align-items:flex-start}
.con-mini > div, .con-mini > span{min-width:0; flex:1}
.mini{width:56px; height:56px; object-fit:contain; background:var(--surface);
      border:1px solid var(--line); border-radius:var(--r-md);
      padding:var(--e1); flex:none}
.mini.chica{width:38px; height:38px; padding:3px; border-radius:var(--r-sm)}
.mini.grande{width:104px; height:104px; padding:6px; border-radius:var(--r-lg)}

/* Barra de progreso. */
.pbar{height:var(--e2); background:var(--line); border-radius:var(--r-xs);
      overflow:hidden}
.pbar i{display:block; height:100%; background:var(--gold); transition:width .4s}

/* Pantalla centrada, para el ingreso. */
.centro{min-height:100vh; display:flex; align-items:center;
        justify-content:center; padding:var(--e6)}
.caja{width:100%; max-width:380px}
.caja .card{padding:28px}
.pie{text-align:center; font-family:var(--mono); font-size:10.5px;
     color:var(--text-faint); margin-top:18px}

/* Teclas de atajo. */
.keys{font-family:var(--mono); font-size:11px; color:var(--text-faint);
      margin-top:13px}
.keys kbd{background:var(--surface); border:1px solid var(--line);
          border-bottom-width:2px; border-radius:var(--r-xs);
          padding:1px 5px; font-size:10.5px}

/* ===================================================================== */
/* Adaptación a pantallas chicas                                         */
/* ===================================================================== */

@media(max-width:900px){
  .kpis{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .wrap{padding:var(--e5)}
  .topbar, .header{padding-left:var(--e5); padding-right:var(--e5)}
}
@media(max-width:640px){
  .kpis{grid-template-columns:1fr}
  .mini{width:44px; height:44px}
  .mini.grande{width:76px; height:76px}
  .paginacion{gap:10px}
  .paginacion .paginas{margin-left:0}
  h1{font-size:21px}
}


/* ---------- barra de acciones de los listados ----------
   Agregado para las pantallas de empresas y pedidos: buscador o filtro a
   la izquierda, descarga a la derecha. En movil se apilan. */
.barra-acciones{display:flex; flex-wrap:wrap; gap:var(--e3);
  align-items:center; justify-content:space-between; margin:var(--e4) 0 var(--e3)}
.buscador{display:flex; flex-wrap:wrap; gap:var(--e2); align-items:center; margin:0}
.buscador input[type=search]{min-width:240px; margin:0}
.buscador input[type=date]{margin:0}
.buscador label.en-linea{display:inline; margin:0 0 0 var(--e2);
  font-size:12.5px; color:var(--text-soft)}
@media (max-width:640px){
  .barra-acciones{align-items:stretch}
  .buscador input[type=search]{min-width:0; flex:1}
}


/* ---------- menú de cuenta, en la barra superior ----------
   Agregado sobre el sistema original.

   Se llama .menu-cuenta y no .cuenta porque esa clase ya existe en
   .paginacion para el "mostrando X de Y". Dos cosas distintas con el
   mismo nombre es una colisión esperando ocurrir.

   Usa <details>/<summary>: abre sin JavaScript, funciona con teclado y
   en el teléfono. Con :hover se abriría al pasar el cursor y en móvil
   no habría forma de abrirlo. */
.menu-cuenta{position:relative}
.menu-cuenta summary{
  list-style:none; cursor:pointer; user-select:none;
  padding:2px 6px; border-radius:var(--r-xs);
  /* El color se fija en vez de heredarlo: <summary> es uno de los
     elementos donde la hoja del navegador interfiere, y el texto
     terminaba negro sobre el azul de la barra. */
  color:#C9CEEB; font-family:var(--mono); font-size:11.5px;
}
.menu-cuenta summary::-webkit-details-marker{display:none}
/* Se usa ▼/▲ y no ▾/▴: estos últimos no existen en todas las fuentes y
   algunos navegadores los reemplazan por un glifo que no corresponde. */
.menu-cuenta summary::after{content:"▼"; margin-left:6px; font-size:8px; opacity:.7}
.menu-cuenta summary:hover{background:rgba(255,255,255,.12); color:#fff}
.menu-cuenta summary:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.menu-cuenta[open] summary{background:rgba(255,255,255,.14); color:#fff}
.menu-cuenta[open] summary::after{content:"▲"}

.menu-cuenta .menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:40;
  min-width:190px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--s-media); padding:6px;
  display:flex; flex-direction:column;
}
.menu-cuenta .menu a{
  display:block; padding:8px 12px; border-radius:var(--r-xs);
  font-family:var(--body); font-size:13.5px; color:var(--text); text-decoration:none;
}
.menu-cuenta .menu a:hover{background:var(--pastel-azul); color:var(--navy)}
.menu-cuenta .menu a.on{background:var(--navy); color:#fff}
.menu-cuenta .menu a.salir{
  border-top:1px solid var(--line); margin-top:4px; padding-top:10px;
  color:var(--text-soft);
}

/* La marca lleva al inicio */
.brand{text-decoration:none; color:inherit}
.brand:hover .name{color:var(--navy)}


/* ---------- volver, en pantallas de detalle ---------- */
.volver{margin:0 0 var(--e3)}
.volver a{font-family:var(--mono); font-size:12px; color:var(--text-soft);
  text-decoration:none}
.volver a:hover{color:var(--navy)}


/* ---------- encabezados de tabla que ordenan ---------- */
thead a.orden{color:inherit; text-decoration:none; display:inline-block;
  white-space:nowrap}
thead a.orden:hover{text-decoration:underline; text-underline-offset:3px}
thead a.orden.activo{font-weight:600}
thead a.orden:focus-visible{outline:2px solid var(--gold); outline-offset:2px}


/* ---------- textarea ----------
   El sistema original no lo contemplaba porque ninguna pantalla de Radar
   pedía texto largo. Copia el estilo de los demás campos para que el
   formulario de gestiones no se vea distinto al resto. */
textarea{
  font-family:var(--body); font-size:13px; color:var(--text);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--e2) var(--e3); line-height:1.5;
  width:100%; resize:vertical; min-height:70px;
  transition:border-color .15s, box-shadow .15s;
}
textarea:hover{border-color:#C7CCDA}
textarea:focus{outline:none; border-color:var(--navy); box-shadow:var(--s-foco)}
textarea::placeholder{color:var(--text-faint)}
.card > form select{width:100%}


/* ---------- tarjetas de resumen con icono ----------
   Estaban dentro de la plantilla de Cotizaciones. Al reusar las mismas
   clases en Contactabilidad, esa pantalla se quedaba sin los estilos y
   los SVG salían a tamaño natural. Van acá para que las comparta
   cualquier pantalla que las use. */
/* ---------- resumen de seis tarjetas ---------- */
.resumen-cot{display:grid; gap:var(--e3); margin-bottom:var(--e4);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tc{border-radius:var(--r-lg); padding:var(--e4) var(--e3); text-align:center;
  border:1px solid var(--line); border-top:4px solid}
/* Cuando la tarjeta es un enlace de descarga */
a.tc{display:block; text-decoration:none; transition:transform .12s, box-shadow .12s}
a.tc:hover{transform:translateY(-2px); box-shadow:var(--s-media)}
a.tc:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
a.tc .pie::after{content:" ↓"; opacity:.55}
.tc .ico{display:inline-flex; width:38px; height:38px; border-radius:50%;
  align-items:center; justify-content:center; margin-bottom:var(--e2)}
.tc .ico svg{width:20px; height:20px; stroke-linecap:round; stroke-linejoin:round}
.tc .tit{font-family:var(--head); font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; line-height:1.3}
.tc .num{font-family:var(--head); font-size:34px; font-weight:700; line-height:1.2}
.tc .pie{font-size:11.5px; color:var(--text-soft); line-height:1.35; margin-top:2px}

.tc.azul{border-top-color:var(--navy); background:var(--pastel-azul)}
.tc.azul .tit,.tc.azul .num{color:var(--navy)}
.tc.azul .ico{background:#fff; color:var(--navy)}
.tc.verde{border-top-color:#0E7C61; background:#E7F5F1}
.tc.verde .tit,.tc.verde .num{color:#0E7C61}
.tc.verde .ico{background:#fff; color:#0E7C61}
.tc.rojo{border-top-color:var(--danger); background:#FCEEEE}
.tc.rojo .tit,.tc.rojo .num{color:var(--danger)}
.tc.rojo .ico{background:#fff; color:var(--danger)}
.tc.morado{border-top-color:#6D4AA8; background:#F1ECFA}
.tc.morado .tit,.tc.morado .num{color:#6D4AA8}
.tc.morado .ico{background:#fff; color:#6D4AA8}
.tc.naranjo{border-top-color:#C2610F; background:#FDF0E4}
.tc.naranjo .tit,.tc.naranjo .num{color:#C2610F}
.tc.naranjo .ico{background:#fff; color:#C2610F}
.tc.amarillo{border-top-color:var(--gold); background:#FEF6E0}
.tc.amarillo .tit,.tc.amarillo .num{color:#A87A00}
.tc.amarillo .ico{background:#fff; color:#A87A00}


/* ---------- columna de nombre de empresa acotada ----------
   Las razones sociales largas empujaban las columnas de la derecha fuera de
   la pantalla. Se corta con puntos suspensivos; el nombre completo queda en
   el title y en la descarga a Excel. */
table.con-empresa td.empresa{max-width:230px}
table.con-empresa td.empresa a{display:block; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
@media (max-width:900px){
  table.con-empresa td.empresa{max-width:160px}
}