@charset "UTF-8";
/* =============================================================================
   Gestión de Monitores y Respuesta a ANS
   Institución Universitaria Digital de Antioquia
   Paleta tomada del logotipo: azul institucional, rojo y amarillo.
   ============================================================================= */

:root{
  --azul-900:#022c47;
  --azul-800:#003257;
  --azul-700:#00497b;   /* principal */
  --azul-600:#0a5c92;
  --azul-500:#1e7ab8;
  --azul-100:#e4eef6;
  --azul-050:#f1f6fa;

  --rojo:#ce1126;
  --rojo-100:#fdeaec;
  --amarillo:#f6b513;
  --amarillo-100:#fff6e0;
  --verde:#1f9d55;
  --verde-100:#e6f6ed;
  --naranja:#e8700a;
  --naranja-100:#fdefe2;
  --violeta:#6b4fbb;
  --violeta-100:#eeeafb;

  --texto:#17293a;
  --texto-2:#4a6377;
  --texto-3:#7d94a6;
  --linea:#e2eaf1;
  --fondo:#f2f6fa;
  --blanco:#fff;

  --r-sm:8px; --r:12px; --r-lg:16px;
  --sombra:0 1px 2px rgba(10,50,80,.06), 0 6px 18px rgba(10,50,80,.07);
  --sombra-alta:0 12px 36px rgba(10,50,80,.16);
  --lateral:258px;
  --fuente:"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fondo);color:var(--texto);
  font-family:var(--fuente);font-size:15px;line-height:1.5;
}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em;color:var(--azul-800)}
p{margin:0}
a{color:var(--azul-600);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
button{font-family:inherit}
table{border-collapse:collapse;width:100%}
.ico{flex:0 0 auto;vertical-align:-.15em}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.salto-contenido{position:absolute;left:-9999px;top:0;background:var(--azul-700);color:#fff;padding:10px 16px;z-index:999;border-radius:0 0 var(--r-sm) 0}
.salto-contenido:focus{left:0}

:focus-visible{outline:3px solid var(--azul-500);outline-offset:2px}

/* =============================================================================
   Estructura
   ============================================================================= */
.app{display:flex;min-height:100vh}
.menu-movil{position:absolute;opacity:0;pointer-events:none}

.lateral{
  width:var(--lateral);flex:0 0 var(--lateral);
  background:linear-gradient(180deg,var(--azul-800) 0%,var(--azul-900) 100%);
  color:#dbe8f2;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.lateral__marca{background:#fff;padding:18px 20px;display:flex;align-items:center;justify-content:center}
.lateral__marca img{max-height:56px;width:auto}
.lateral__titulo{padding:16px 20px 12px;border-bottom:1px solid rgba(255,255,255,.1)}
.lateral__titulo span{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#8fb4d0}
.lateral__titulo strong{display:block;font-size:17px;color:#fff;line-height:1.25}
.lateral__nav{flex:1;overflow-y:auto;padding:14px 10px}
.lateral__grupo{margin:14px 10px 6px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7ea4c2}
.lateral__item{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);
  color:#cfe0ee;font-size:14.2px;font-weight:500;margin-bottom:2px;transition:background .15s,color .15s;
}
.lateral__item:hover{background:rgba(255,255,255,.09);color:#fff;text-decoration:none}
.lateral__item.es-activo{background:var(--azul-600);color:#fff;box-shadow:inset 3px 0 0 var(--amarillo)}
.lateral__pie{padding:10px;border-top:1px solid rgba(255,255,255,.1)}
.lateral__version{margin:8px 12px 4px;font-size:11px;color:#7ea4c2}

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

.superior{
  position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--linea);display:flex;align-items:center;gap:16px;padding:12px 24px;
}
.superior__menu{display:none;cursor:pointer;color:var(--azul-700);padding:6px;border-radius:var(--r-sm)}
.superior__tit{min-width:0;flex:0 1 auto}
.superior__tit h1{font-size:19px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.superior__tit p{font-size:12.6px;color:var(--texto-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.superior__buscar{margin-left:auto;position:relative;display:flex;align-items:center;max-width:330px;flex:1 1 180px}
.superior__buscar .ico{position:absolute;left:11px;color:var(--texto-3)}
.superior__buscar input{
  width:100%;padding:9px 12px 9px 34px;border:1px solid var(--linea);border-radius:999px;
  background:var(--azul-050);font-size:13.5px;color:var(--texto);
}
.superior__buscar input:focus{background:#fff;border-color:var(--azul-500);outline:none}
.superior__acc{display:flex;align-items:center;gap:8px}
.campana{position:relative;color:var(--azul-700);padding:8px;border-radius:50%;display:grid;place-items:center}
.campana:hover{background:var(--azul-100)}
.campana__n{
  position:absolute;top:0;right:0;background:var(--rojo);color:#fff;font-size:10px;font-weight:700;
  min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding:0 4px;border:2px solid #fff;
}
.usuario-chip{display:flex;align-items:center;gap:9px;padding:5px 10px 5px 5px;border-radius:999px;color:var(--texto)}
.usuario-chip:hover{background:var(--azul-050);text-decoration:none}
.usuario-chip span{display:flex;flex-direction:column;line-height:1.2}
.usuario-chip b{font-size:13.4px}
.usuario-chip em{font-size:11.4px;color:var(--texto-3);font-style:normal}

.barra-acciones{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:12px 24px;background:#fff;border-bottom:1px solid var(--linea);
}
.contenido{padding:22px 24px 36px;flex:1}
.pie{
  padding:14px 24px;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;gap:8px;
  justify-content:space-between;font-size:12px;color:var(--texto-3);background:#fff;
}
.velo{display:none}

.avatar{
  border-radius:50%;display:inline-grid;place-items:center;color:#fff;font-weight:700;
  object-fit:cover;flex:0 0 auto;letter-spacing:.02em;
}

/* =============================================================================
   Avisos
   ============================================================================= */
.aviso{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);margin-bottom:14px;font-size:14px;border:1px solid}
.aviso p{margin:0}
.aviso--exito{background:var(--verde-100);border-color:#bde5cd;color:#135f36}
.aviso--exito .ico{color:var(--verde)}
.aviso--peligro{background:var(--rojo-100);border-color:#f3c3c9;color:#8e0d1c}
.aviso--peligro .ico{color:var(--rojo)}
.aviso--alerta{background:var(--amarillo-100);border-color:#f3dba5;color:#7a5405}
.aviso--alerta .ico{color:var(--naranja)}
.aviso--info{background:var(--azul-100);border-color:#c7ddee;color:var(--azul-800)}
.aviso--info .ico{color:var(--azul-600)}

/* =============================================================================
   Botones
   ============================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;border-radius:var(--r-sm);border:1px solid var(--linea);background:#fff;
  color:var(--azul-700);font-size:13.8px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:background .15s,border-color .15s,transform .05s;white-space:nowrap;
}
.btn:hover{background:var(--azul-050);border-color:#cfdceb;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn--principal{background:var(--azul-700);border-color:var(--azul-700);color:#fff}
.btn--principal:hover{background:var(--azul-600);border-color:var(--azul-600)}
.btn--peligro{background:var(--rojo);border-color:var(--rojo);color:#fff}
.btn--peligro:hover{background:#b30f21;border-color:#b30f21}
.btn--exito{background:var(--verde);border-color:var(--verde);color:#fff}
.btn--exito:hover{background:#178549;border-color:#178549}
.btn--ambar{background:var(--amarillo);border-color:var(--amarillo);color:#4a3400}
.btn--ambar:hover{background:#e3a60c;border-color:#e3a60c}
.btn--fantasma{background:transparent;border-color:transparent;color:var(--texto-2)}
.btn--fantasma:hover{background:var(--azul-050);color:var(--azul-700)}
.btn--mini{padding:5px 10px;font-size:12.4px;border-radius:6px}
.btn--ancho{width:100%}
.btn--activo{background:var(--azul-700);border-color:var(--azul-700);color:#fff}
.btn[disabled],.btn.es-inactivo{opacity:.55;pointer-events:none}

.btn-grupo{display:inline-flex;flex-wrap:wrap;gap:6px}

/* =============================================================================
   Tarjetas y secciones
   ============================================================================= */
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:var(--r-lg);box-shadow:var(--sombra);padding:18px}
.tarjeta--plana{box-shadow:none}
.tarjeta__cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.tarjeta__cab h3{font-size:15.4px}
.tarjeta__cab p{font-size:12.4px;color:var(--texto-3)}
.tarjeta__pie{margin-top:14px;padding-top:12px;border-top:1px solid var(--linea);font-size:12.6px;color:var(--texto-3)}

.seccion{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin:26px 0 14px}
.seccion:first-child{margin-top:0}
.seccion h2{font-size:17px}
.seccion p{font-size:13px;color:var(--texto-2);margin-top:2px;max-width:70ch}
.seccion__acc{display:flex;flex-wrap:wrap;gap:8px}

.rejilla{display:grid;gap:16px}
.rejilla--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rejilla--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rejilla--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rejilla--kpi{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.rejilla--cat{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.rejilla--2-1{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.rejilla--1-2{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}

/* =============================================================================
   KPI
   ============================================================================= */
.kpi{
  position:relative;background:#fff;border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:15px 16px;display:flex;gap:13px;align-items:flex-start;box-shadow:var(--sombra);overflow:hidden;
}
.kpi::after{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--azul-700)}
.kpi__ico{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--azul-100);color:var(--azul-700);
}
.kpi__cuerpo{min-width:0}
.kpi__titulo{display:block;font-size:12.2px;color:var(--texto-2);font-weight:600;letter-spacing:.01em}
.kpi__valor{display:block;font-size:26px;line-height:1.15;color:var(--azul-800);font-weight:700;margin-top:1px}
.kpi__valor small{font-size:14px;color:var(--texto-3);font-weight:600}
.kpi__sub{display:block;font-size:12.2px;color:var(--texto-3);margin-top:3px}
.kpi__link{position:absolute;right:10px;top:12px;color:var(--texto-3)}
.kpi--rojo::after{background:var(--rojo)}    .kpi--rojo .kpi__ico{background:var(--rojo-100);color:var(--rojo)}
.kpi--verde::after{background:var(--verde)}  .kpi--verde .kpi__ico{background:var(--verde-100);color:var(--verde)}
.kpi--ambar::after{background:var(--amarillo)}.kpi--ambar .kpi__ico{background:var(--amarillo-100);color:#9a6c00}
.kpi--naranja::after{background:var(--naranja)}.kpi--naranja .kpi__ico{background:var(--naranja-100);color:var(--naranja)}
.kpi--violeta::after{background:var(--violeta)}.kpi--violeta .kpi__ico{background:var(--violeta-100);color:var(--violeta)}
.kpi--gris::after{background:#9fb2c2}        .kpi--gris .kpi__ico{background:#eef2f6;color:var(--texto-2)}

/* =============================================================================
   Etiquetas de estado y prioridad
   ============================================================================= */
.etiqueta{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:12px;font-weight:600;border:1px solid transparent;white-space:nowrap;
}
.estado--abierto{background:#eef2f6;color:#3f566b;border-color:#dde5ec}
.estado--asignado{background:var(--azul-100);color:var(--azul-700);border-color:#c7ddee}
.estado--proceso{background:var(--amarillo-100);color:#8a5f00;border-color:#f1dca8}
.estado--espera{background:var(--naranja-100);color:#9a4c05;border-color:#f6d5b6}
.estado--resuelto{background:var(--violeta-100);color:#4a33a0;border-color:#d8cff5}
.estado--cerrado{background:var(--verde-100);color:#13693c;border-color:#bfe6cf}
.estado--reabierto{background:var(--rojo-100);color:#9a0f1f;border-color:#f3c3c9}
.estado--cancelado{background:#f1f3f5;color:#6b7780;border-color:#e2e6ea;text-decoration:line-through}

.prio--baja{background:#eef2f6;color:#4a6377;border-color:#dde5ec}
.prio--media{background:var(--azul-100);color:var(--azul-700);border-color:#c7ddee}
.prio--alta{background:var(--naranja-100);color:#9a4c05;border-color:#f6d5b6}
.prio--critica{background:var(--rojo);color:#fff;border-color:var(--rojo)}

.chip{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  padding:3px 9px;border-radius:999px;color:var(--c,#00497B);
  background:color-mix(in srgb, var(--c,#00497B) 12%, #fff);
  border:1px solid color-mix(in srgb, var(--c,#00497B) 30%, #fff);
}
@supports not (background:color-mix(in srgb,#000 10%,#fff)){
  .chip{background:var(--azul-050);border-color:var(--linea)}
}
.marca-desborde{color:var(--naranja);font-weight:600}

/* Semáforo de ANS */
.sem{display:inline-flex;align-items:center;gap:5px;font-size:12.4px;font-weight:600}
.sem--ok{color:#13693c}
.sem--medio{color:#8a5f00}
.sem--riesgo{color:var(--naranja)}
.sem--mal{color:var(--rojo)}

.barra{display:block;background:#e9eff5;border-radius:99px;overflow:hidden;margin-top:5px;width:100%;min-width:90px}
.barra>span{display:block;height:100%;border-radius:99px;transition:width .4s}
.barra__txt{font-size:11.6px;color:var(--texto-3)}

.val{font-weight:700;font-variant-numeric:tabular-nums}
.val--bueno{color:var(--verde)}
.val--medio{color:#b8860b}
.val--malo{color:var(--rojo)}
.val--neutro{color:var(--texto-3);font-weight:600}

/* Estrellas */
.estrellas{display:inline-flex;align-items:center;gap:1px;font-size:14px;color:#d8e0e7;white-space:nowrap}
.estrellas .est--full{color:var(--amarillo)}
.estrellas .est--media{color:#f3d58a}
.estrellas b{margin-left:5px;font-size:12.4px;color:var(--texto-2)}
.estrellas--vacio{font-size:12px;color:var(--texto-3)}

.estrellas-input{display:flex;align-items:center;gap:3px;direction:ltr}
.estrellas-input input{position:absolute;opacity:0;width:1px;height:1px}
.estrellas-input label{font-size:30px;line-height:1;color:#dde4ea;cursor:pointer;transition:transform .1s,color .15s}
.estrellas-input label:hover{transform:scale(1.12)}
.estrellas-input label.es-activa{color:var(--amarillo)}
/* Sin JavaScript no hay clase .es-activa: al menos se resalta la elegida.
   Con JavaScript el contenedor recibe .con-js y manda solo .es-activa, para
   que al pasar el mouse no queden dos tramos encendidos a la vez. */
.estrellas-input:not(.con-js) input:checked + label{color:var(--amarillo)}
.estrellas-input input:focus-visible + label{outline:3px solid var(--azul-500);border-radius:4px}
.estrellas-input__txt{margin-left:10px;font-size:13px;font-weight:600;color:var(--texto-2)}

/* =============================================================================
   Tablas
   ============================================================================= */
.tabla-env{overflow-x:auto;border-radius:var(--r);border:1px solid var(--linea);background:#fff}
.tabla{font-size:13.6px}
.tabla th{
  text-align:left;font-size:11.4px;letter-spacing:.07em;text-transform:uppercase;color:var(--texto-3);
  padding:11px 14px;background:var(--azul-050);border-bottom:1px solid var(--linea);white-space:nowrap;font-weight:700;
}
.tabla td{padding:11px 14px;border-bottom:1px solid #eef3f7;vertical-align:middle}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla tbody tr:hover{background:#fafcfe}
.tabla--compacta td,.tabla--compacta th{padding:8px 12px}
.td--caso{min-width:190px;max-width:430px}
.td--caso a{color:var(--azul-800)}
.td--caso b{font-weight:600;display:block;line-height:1.3}
.td--meta{display:block;font-size:11.8px;color:var(--texto-3);margin-top:2px}
.td--persona{display:flex;align-items:center;gap:8px;white-space:nowrap}
.td--ans{min-width:170px}
.td--accion,.th--accion{text-align:right;white-space:nowrap}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums}

.vacio{text-align:center;padding:36px 18px;color:var(--texto-3);background:#fff;border:1px dashed var(--linea);border-radius:var(--r)}
.vacio .ico{color:#c3d2de;margin-bottom:8px}
.vacio p{font-size:13.6px;line-height:1.6;max-width:52ch;margin:0 auto}

.paginador{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:14px}
.paginador__info{font-size:12.6px;color:var(--texto-3)}
.paginador__btns{display:flex;gap:5px;flex-wrap:wrap}

/* =============================================================================
   Formularios
   ============================================================================= */
.formulario{display:grid;gap:16px}
.campos{display:grid;gap:16px}
.campos--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.campos--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.campos--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo--ancho{grid-column:1/-1}
.campo>label,.campo .etq{font-size:13px;font-weight:600;color:var(--texto)}
.campo .pista{font-size:12px;color:var(--texto-3)}
.campo input[type=text],.campo input[type=email],.campo input[type=password],.campo input[type=number],
.campo input[type=search],.campo input[type=date],.campo input[type=datetime-local],.campo input[type=tel],
.campo input[type=time],.campo input[type=color],.campo select,.campo textarea{
  width:100%;padding:10px 12px;border:1px solid #d5e0ea;border-radius:var(--r-sm);font-size:14px;
  font-family:inherit;color:var(--texto);background:#fff;transition:border-color .15s,box-shadow .15s;
}
.campo textarea{resize:vertical;min-height:96px;line-height:1.55}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--azul-500);box-shadow:0 0 0 3px rgba(30,122,184,.15);
}
.campo input[type=color]{padding:4px;height:42px;cursor:pointer}
.campo .error{font-size:12.4px;color:var(--rojo);font-weight:600}
.campo.tiene-error input,.campo.tiene-error select,.campo.tiene-error textarea{border-color:var(--rojo);background:#fffafb}
.campo__clave{position:relative;display:flex}
.campo__clave input{padding-right:42px}
.ver-clave{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;
  color:var(--texto-3);padding:8px;border-radius:6px;
}
.ver-clave:hover{color:var(--azul-700);background:var(--azul-050)}

.casilla{display:flex;gap:9px;align-items:flex-start;font-size:13.6px;cursor:pointer;padding:8px 10px;border:1px solid var(--linea);border-radius:var(--r-sm);background:#fff}
.casilla:hover{border-color:#cfdceb;background:var(--azul-050)}
.casilla input{margin:2px 0 0;accent-color:var(--azul-700);width:16px;height:16px;flex:0 0 auto}
.casilla span b{display:block;font-weight:600}
.casilla span em{font-style:normal;color:var(--texto-3);font-size:12.2px}
.casillas{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

.tarjetas-radio{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}
.tarjeta-radio{position:relative;cursor:pointer}
.tarjeta-radio input{position:absolute;opacity:0;width:1px;height:1px}
.tarjeta-radio__cuerpo{
  display:flex;gap:10px;align-items:flex-start;padding:12px;border:2px solid var(--linea);
  border-radius:var(--r);background:#fff;height:100%;transition:border-color .15s,box-shadow .15s;
}
.tarjeta-radio:hover .tarjeta-radio__cuerpo{border-color:#bed2e4}
.tarjeta-radio input:checked + .tarjeta-radio__cuerpo{border-color:var(--azul-700);box-shadow:0 0 0 3px rgba(0,73,123,.12)}
.tarjeta-radio input:focus-visible + .tarjeta-radio__cuerpo{outline:3px solid var(--azul-500);outline-offset:2px}
.tarjeta-radio__ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;color:#fff}
.tarjeta-radio__cuerpo b{display:block;font-size:13.8px;line-height:1.25}
.tarjeta-radio__cuerpo em{font-style:normal;font-size:11.8px;color:var(--texto-3);display:block;margin-top:2px}
.tarjeta-radio__cuerpo .meta{font-size:11.4px;color:var(--texto-3);margin-top:5px;display:block}

.filtros{
  display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
  background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:14px;margin-bottom:16px;
}
.filtros .campo{flex:1 1 160px;gap:4px}
.filtros .campo>label{font-size:11.4px;text-transform:uppercase;letter-spacing:.06em;color:var(--texto-3)}
.filtros select,.filtros input{padding:8px 10px;font-size:13.4px}
.filtros__btns{display:flex;gap:8px;flex:0 0 auto}
.fichas{display:flex;flex-wrap:wrap;gap:6px}
.ficha{
  padding:6px 12px;border-radius:999px;border:1px solid var(--linea);background:#fff;
  font-size:12.8px;font-weight:600;color:var(--texto-2);
}
.ficha:hover{background:var(--azul-050);text-decoration:none;border-color:#cfdceb}
.ficha.es-activa{background:var(--azul-700);border-color:var(--azul-700);color:#fff}
.ficha b{font-weight:700}

/* =============================================================================
   Gráficos
   ============================================================================= */
.g-env{width:100%}
.g{width:100%;display:block;overflow:visible}
.g__guia{stroke:#e9eff5;stroke-width:.4;vector-effect:non-scaling-stroke}
.g__ejes{display:flex;margin-top:6px}
.g__ejes>span{
  flex:1 1 0;min-width:0;text-align:center;font-size:11px;color:var(--texto-3);
  display:flex;flex-direction:column;gap:1px;padding:0 2px;
}
.g__ejes>span b{font-size:12.4px;color:var(--texto);font-variant-numeric:tabular-nums}
.g__ejes--x>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g__leyenda{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:8px;font-size:12.4px;color:var(--texto-2)}
.g__leyenda i,.dona__leyenda i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px}
.g__leyenda span{display:inline-flex;align-items:center}

.dona-env{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.dona{width:142px;height:142px;flex:0 0 auto}
.dona__n{font-size:6.2px;font-weight:700;text-anchor:middle;fill:var(--azul-800);font-family:var(--fuente)}
.dona__t{font-size:2.6px;text-anchor:middle;fill:#7d94a6;font-family:var(--fuente);letter-spacing:.08em;text-transform:uppercase}
.dona__leyenda{list-style:none;margin:0;padding:0;flex:1 1 170px;min-width:160px}
.dona__leyenda li{display:flex;align-items:center;gap:4px;font-size:12.8px;padding:3px 0;border-bottom:1px dashed #eef3f7}
.dona__leyenda li:last-child{border-bottom:0}
.dona__leyenda span{flex:1;color:var(--texto-2)}
.dona__leyenda b{font-variant-numeric:tabular-nums}
.dona__leyenda em{font-style:normal;color:var(--texto-3);font-size:11.4px;min-width:34px;text-align:right}

.gh{display:grid;gap:9px}
.gh__f{display:grid;grid-template-columns:minmax(90px,30%) 1fr auto;gap:10px;align-items:center}
.gh__et{font-size:12.8px;color:var(--texto-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gh__b{background:#eef3f7;border-radius:99px;height:9px;overflow:hidden}
.gh__b i{display:block;height:100%;border-radius:99px}
.gh__v{font-size:12.6px;font-variant-numeric:tabular-nums;color:var(--texto);min-width:42px;text-align:right}

/* =============================================================================
   Detalle del caso
   ============================================================================= */
.caso-cab{background:#fff;border:1px solid var(--linea);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sombra)}
.caso-cab__sup{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.caso-cab h2{font-size:21px;line-height:1.3}
.caso-cab__meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:12.8px;color:var(--texto-2)}
.caso-cab__meta div{display:flex;flex-direction:column}
.caso-cab__meta span{font-size:11.2px;text-transform:uppercase;letter-spacing:.06em;color:var(--texto-3)}
.caso-cab__meta b{font-weight:600;color:var(--texto)}

.pasos{display:flex;gap:4px;margin:16px 0 4px;flex-wrap:wrap}
.paso{flex:1 1 90px;min-width:84px}
.paso i{display:block;height:5px;border-radius:99px;background:#e4ebf2}
.paso.es-hecho i{background:var(--azul-600)}
.paso.es-actual i{background:var(--amarillo)}
.paso span{display:block;font-size:11.2px;color:var(--texto-3);margin-top:5px}
.paso.es-hecho span,.paso.es-actual span{color:var(--texto);font-weight:600}

.bitacora{list-style:none;margin:0;padding:0;position:relative}
.bitacora::before{content:"";position:absolute;left:17px;top:6px;bottom:6px;width:2px;background:var(--linea)}
.bitacora li{position:relative;padding:0 0 16px 46px}
.bitacora li:last-child{padding-bottom:0}
.bit__ico{
  position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:#fff;
  border:2px solid var(--linea);display:grid;place-items:center;color:var(--texto-2);
}
.bit--creacion .bit__ico{border-color:var(--azul-500);color:var(--azul-600)}
.bit--asignacion .bit__ico{border-color:var(--violeta);color:var(--violeta)}
.bit--estado .bit__ico{border-color:var(--amarillo);color:#9a6c00}
.bit--cierre .bit__ico{border-color:var(--verde);color:var(--verde)}
.bit--calificacion .bit__ico{border-color:var(--amarillo);color:#9a6c00}
.bit--reapertura .bit__ico{border-color:var(--rojo);color:var(--rojo)}
.bit__cab{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:13px}
.bit__cab b{font-weight:600}
.bit__cab time{color:var(--texto-3);font-size:11.8px}
.bit__cuerpo{
  margin-top:5px;background:#fff;border:1px solid var(--linea);border-radius:var(--r);
  padding:11px 13px;font-size:13.6px;white-space:pre-wrap;word-wrap:break-word;
}
.bit__cuerpo.es-interno{background:var(--amarillo-100);border-color:#f1dca8}
.bit__etq{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9a6c00}

/* Plazos que el ANS impone al radicar: no se editan, se informan. */
.caja-plazos{background:var(--azul-050);border:1px solid #d5e0ea;border-radius:var(--r-sm);padding:4px 12px}
.caja-plazos .caja-datos li{border-bottom-color:#dde7ef}
.caja-plazos b{color:var(--azul-700)}

.caja-datos{list-style:none;margin:0;padding:0;font-size:13.4px}
.caja-datos li{display:flex;gap:10px;justify-content:space-between;padding:8px 0;border-bottom:1px dashed #eef3f7}
.caja-datos li:last-child{border-bottom:0}
.caja-datos span{color:var(--texto-3);flex:0 0 auto}
.caja-datos b{font-weight:600;text-align:right}

.adjuntos{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.adjuntos a{display:flex;gap:9px;align-items:center;padding:9px 11px;border:1px solid var(--linea);border-radius:var(--r-sm);background:#fff;font-size:13px;color:var(--texto)}
.adjuntos a:hover{border-color:var(--azul-500);background:var(--azul-050);text-decoration:none}
.adjuntos em{font-style:normal;color:var(--texto-3);font-size:11.6px;margin-left:auto;white-space:nowrap}

.panel-accion{background:var(--azul-050);border:1px solid #d8e5ef;border-radius:var(--r);padding:14px;margin-top:14px}
.panel-accion h4{font-size:13.8px;margin-bottom:10px;display:flex;align-items:center;gap:7px}

details.plegable{border:1px solid var(--linea);border-radius:var(--r);background:#fff;margin-bottom:10px}
details.plegable>summary{
  padding:12px 14px;cursor:pointer;font-weight:600;font-size:13.8px;color:var(--azul-800);
  display:flex;align-items:center;gap:8px;list-style:none;
}
details.plegable>summary::-webkit-details-marker{display:none}
details.plegable>summary::after{content:"▾";margin-left:auto;color:var(--texto-3)}
details.plegable[open]>summary::after{content:"▴"}
details.plegable>div{padding:0 14px 14px}

/* =============================================================================
   Categorías (tarjetas)
   ============================================================================= */
.cat-tarjeta{background:#fff;border:1px solid var(--linea);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sombra);border-top:4px solid var(--c,#00497B)}
.cat-tarjeta__cab{display:flex;gap:11px;align-items:flex-start;margin-bottom:11px}
.cat-tarjeta__ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:0 0 auto}
.cat-tarjeta h3{font-size:15px;line-height:1.25}
.cat-tarjeta p{font-size:12.4px;color:var(--texto-3);margin-top:2px}
.cat-tarjeta__nums{display:flex;gap:14px;margin-top:10px;font-size:12.4px}
.cat-tarjeta__nums b{display:block;font-size:18px;color:var(--azul-800)}
.cat-tarjeta__nums span{color:var(--texto-3)}
.monitores-mini{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.monitor-mini{display:flex;align-items:center;gap:6px;background:var(--azul-050);border:1px solid var(--linea);border-radius:999px;padding:3px 10px 3px 3px;font-size:12px}
.monitor-mini em{font-style:normal;color:var(--texto-3)}
.insignia-sat{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--rojo-100);color:#9a0f1f;border:1px solid #f3c3c9}
.insignia-ok{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--verde-100);color:#13693c;border:1px solid #bfe6cf}

/* =============================================================================
   Login
   ============================================================================= */
.cuerpo-login{background:linear-gradient(135deg,var(--azul-800) 0%,var(--azul-900) 55%,#01223a 100%);min-height:100vh}
.login{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:100vh;max-width:1180px;margin:0 auto}
.login__marca{padding:48px 44px;color:#dce9f4;display:flex;flex-direction:column;justify-content:center}
.login__logo{background:#fff;border-radius:var(--r-lg);padding:14px 18px;max-width:252px;margin-bottom:26px}
.login__marca h1{color:#fff;font-size:30px;line-height:1.18;letter-spacing:-.02em}
.login__lema{margin-top:12px;font-size:14.6px;color:#a9c7de;max-width:46ch}
.login__puntos{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.login__puntos li{display:flex;gap:12px;align-items:flex-start}
.login__puntos .ico{color:var(--amarillo);margin-top:2px}
.login__puntos b{display:block;color:#fff;font-size:14px}
.login__puntos span{font-size:12.8px;color:#9cbbd4}
.login__cats{display:flex;flex-wrap:wrap;gap:7px;margin-top:30px}
.login__cats span{
  display:inline-flex;align-items:center;gap:6px;font-size:11.8px;color:#cfe2f1;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);padding:4px 10px;border-radius:999px;
}
.login__caja{display:flex;align-items:center;justify-content:center;padding:34px 24px}
.login__caja-int{background:#fff;border-radius:20px;box-shadow:var(--sombra-alta);padding:34px;width:100%;max-width:412px}
.login__caja-int h2{font-size:22px}
.login__sub{font-size:13.6px;color:var(--texto-2);margin:4px 0 20px}
.login__caja-int form{display:grid;gap:15px;margin-top:4px}
.login__ayuda{margin-top:18px;font-size:12.4px;color:var(--texto-3);display:flex;gap:7px;align-items:flex-start}
.login__ayuda a{font-weight:600}
.login__pie{margin-top:20px;padding-top:14px;border-top:1px solid var(--linea);font-size:11.6px;color:var(--texto-3);text-align:center}

/* =============================================================================
   Bandeja de notificaciones
   Avisos agrupados por día. Cuando el aviso pertenece a un caso, toda la
   tarjeta es el enlace, así que no hay enlaces anidados.
   ============================================================================= */
.avisos{list-style:none;margin:0;padding:0;display:grid;gap:9px}

.avisos__dia{
  margin:16px 0 3px;display:flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);
}
.avisos__dia:first-child{margin-top:0}
.avisos__dia::after{content:"";flex:1;height:1px;background:var(--linea)}

.avisos__item{
  display:flex;gap:14px;align-items:flex-start;
  background:#fff;border:1px solid var(--linea);border-left:4px solid var(--azul-600);
  border-radius:var(--r);padding:14px 16px;box-shadow:var(--sombra);
  color:var(--texto);text-decoration:none;
  transition:transform .12s,box-shadow .15s,border-color .15s;
}
a.avisos__item:hover{
  text-decoration:none;transform:translateX(2px);
  box-shadow:var(--sombra-alta);border-color:#cfdceb;
}
a.avisos__item:hover .avisos__flecha{transform:translateX(3px);color:var(--azul-700)}
a.avisos__item:focus-visible{outline:3px solid var(--azul-500);outline-offset:2px}

.avisos__item--exito{border-left-color:var(--verde)}
.avisos__item--alerta{border-left-color:var(--amarillo)}
.avisos__item--peligro{border-left-color:var(--rojo)}

.avisos__ico{
  width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:grid;place-items:center;
  background:var(--azul-100);color:var(--azul-700);
}
.avisos__item--exito .avisos__ico{background:var(--verde-100);color:var(--verde)}
.avisos__item--alerta .avisos__ico{background:var(--amarillo-100);color:var(--naranja)}
.avisos__item--peligro .avisos__ico{background:var(--rojo-100);color:var(--rojo)}

.avisos__cuerpo{display:block;flex:1;min-width:0}
.avisos__tit{display:block;font-size:14.6px;font-weight:700;line-height:1.35;color:var(--azul-800)}
.avisos__msg{display:block;margin-top:4px;font-size:13.4px;line-height:1.55;color:var(--texto-2)}

.avisos__pie{
  display:flex;flex-wrap:wrap;align-items:center;gap:5px 14px;
  margin-top:9px;font-size:12.2px;color:var(--texto-3);
}
.avisos__pie time{display:inline-flex;align-items:center;gap:4px}
.avisos__accion{display:inline-flex;align-items:center;gap:4px;color:var(--azul-600);font-weight:600}

.avisos__nuevo{
  display:inline-block;margin-left:7px;vertical-align:2px;font-style:normal;
  background:var(--azul-700);color:#fff;font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;
}
.avisos__item.es-nuevo{background:var(--azul-050);border-color:#cfdceb}

.avisos__flecha{
  flex:0 0 auto;margin-top:9px;color:var(--texto-3);
  transition:transform .12s,color .15s;
}

.avisos__nota{
  display:flex;gap:7px;align-items:flex-start;margin-top:18px;padding-top:14px;
  border-top:1px solid var(--linea);font-size:12.4px;color:var(--texto-3);
}

@media (max-width:640px){
  .avisos__item{padding:12px 13px;gap:11px}
  .avisos__ico{width:34px;height:34px;flex-basis:34px;border-radius:10px}
  .avisos__flecha{display:none}
}
@media (prefers-reduced-motion:reduce){
  a.avisos__item:hover,a.avisos__item:hover .avisos__flecha{transform:none}
}

/* =============================================================================
   Diálogo de confirmación (reemplaza el cuadro del navegador)
   ============================================================================= */
.dialogo{
  border:0;padding:0;background:transparent;margin:auto;
  width:100%;max-width:420px;max-height:calc(100vh - 32px);
}
.dialogo::backdrop{background:rgba(2,28,47,.55)}
.dialogo__caja{
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--sombra-alta);
  padding:26px 24px 20px;text-align:center;
}
.dialogo__ico{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  margin:0 auto 14px;background:var(--azul-100);color:var(--azul-700);
}
.dialogo--peligro .dialogo__ico{background:var(--rojo-100);color:var(--rojo)}
.dialogo--exito   .dialogo__ico{background:var(--verde-100);color:var(--verde)}
.dialogo__caja h2{font-size:17.5px;line-height:1.3;margin-bottom:7px}
.dialogo__texto{font-size:14px;line-height:1.55;color:var(--texto-2);margin:0}
.dialogo__acciones{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.dialogo__acciones .btn{min-width:132px;justify-content:center}
.dialogo[open]{animation:dialogo-entra .15s ease-out}
@keyframes dialogo-entra{
  from{opacity:0;transform:translateY(-10px) scale(.97)}
  to{opacity:1;transform:none}
}
@media (max-width:420px){
  .dialogo__acciones .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .dialogo[open]{animation:none}
}

/* =============================================================================
   Encuesta pública de calificación (una sola columna, sin menú)
   ============================================================================= */
.login--solo{grid-template-columns:minmax(0,1fr);max-width:760px}
.login--solo .login__caja{padding:30px 20px}
.login--solo .login__caja-int{max-width:540px}
.login--solo .login__caja-int form{margin-top:18px}

.encuesta__logo{max-width:196px;margin:0 auto 20px}
.encuesta__estrellas{
  text-align:center;font-size:34px;line-height:1;letter-spacing:5px;
  color:var(--amarillo);margin:0 0 12px;
}
.encuesta__estrellas span{color:#e4e8ee}
.encuesta__estrellas--ok{letter-spacing:4px}
.encuesta__estrellas--mal{color:var(--amarillo);letter-spacing:0}
.login--solo h2{text-align:center}
.login--solo .login__sub{text-align:center}

.encuesta__caso{
  margin-top:18px;padding:14px 16px;background:var(--azul-050);
  border-radius:var(--r);border-left:4px solid var(--azul-700);
}
.encuesta__caso span{
  display:block;font-size:11.4px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--texto-3);margin-bottom:3px;
}
.encuesta__caso b{display:block;font-size:15.4px;line-height:1.4;color:var(--azul-800)}
.encuesta__caso em{display:block;margin-top:6px;font-size:12.4px;color:var(--texto-2);font-style:normal}

/* =============================================================================
   Errores y utilidades
   ============================================================================= */
.pantalla-error{min-height:100vh;display:grid;place-items:center;padding:30px;background:var(--fondo)}
.pantalla-error__caja{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sombra);padding:36px;max-width:520px;text-align:center}
.pantalla-error__caja .ico{color:var(--amarillo)}
.pantalla-error__caja h1{font-size:23px;margin:12px 0 8px}
.pantalla-error__caja p{color:var(--texto-2);font-size:14px;margin-bottom:20px}

.nota{font-size:12.6px;color:var(--texto-3)}
.ta-der{text-align:right}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-2{margin-bottom:16px}
.flex{display:flex;gap:10px;align-items:center}
.flex-entre{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.flex-fin{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.envoltura{display:flex;flex-wrap:wrap;gap:8px}
.oculto{display:none}

/* =============================================================================
   Adaptable
   ============================================================================= */
@media (max-width:1180px){
  .rejilla--4,.campos--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rejilla--2-1,.rejilla--1-2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:980px){
  .login{grid-template-columns:minmax(0,1fr)}
  .login__marca{padding:34px 26px 10px;text-align:center;align-items:center}
  .login__puntos,.login__cats{display:none}
  .login__marca h1{font-size:25px}
  .rejilla--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .lateral{
    position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:var(--sombra-alta);
  }
  .menu-movil:checked ~ .app .lateral{transform:none}
  .menu-movil:checked ~ .velo{display:block;position:fixed;inset:0;background:rgba(2,44,71,.5);z-index:50}
  .superior__menu{display:grid}
  .superior{padding:10px 14px;gap:10px}
  .superior__buscar{display:none}
  .contenido,.barra-acciones,.pie{padding-left:14px;padding-right:14px}
  .usuario-chip span{display:none}
  .rejilla--2,.rejilla--3,.rejilla--4{grid-template-columns:minmax(0,1fr)}
  .campos--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .campos--2,.campos--3{grid-template-columns:minmax(0,1fr)}
  .seccion{margin:20px 0 12px}
}
@media (max-width:520px){
  .login__caja{padding:18px 12px 34px}
  .login__caja-int{padding:24px 20px}
  .kpi__valor{font-size:23px}
  .caso-cab h2{font-size:18px}
}

/* =============================================================================
   Impresión
   ============================================================================= */
@media print{
  .lateral,.superior,.barra-acciones,.pie,.velo,.btn,.filtros,.paginador{display:none !important}
  body{background:#fff}
  .contenido{padding:0}
  .tarjeta,.kpi,.tabla-env{box-shadow:none;border-color:#ccc;break-inside:avoid}
}