@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Barlow:wght@400;500;600&display=swap');

:root{
  --papel:#F4F5F3;
  --tinta:#16283A;
  --tinta-suave:#5A6B7A;
  --verde:#2D8659;
  --ambar:#D99A2B;
  --rojo:#B23A32;
  --linea:#D3D8D2;
  --blanco:#FFFFFF;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'Barlow',system-ui,sans-serif;
  font-size:17px;
  line-height:1.5;
  color:var(--tinta);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------- estructura */

.barra{
  background:var(--tinta);
  color:var(--blanco);
  padding:14px 20px;
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
}
.barra .turno{
  font-family:'Barlow Condensed',sans-serif;
  font-size:26px;
  font-weight:700;
  letter-spacing:.01em;
}
.barra .quien{
  margin-left:auto;
  font-size:15px;
  color:#A9BACA;
}
.barra button{
  background:none;
  border:1px solid #3C5064;
  color:#A9BACA;
  padding:5px 12px;
  border-radius:3px;
  font:inherit;
  font-size:14px;
  cursor:pointer;
}
.barra button:hover{border-color:#6E8296;color:var(--blanco)}

main{max-width:760px;margin:0 auto;padding:22px 16px 90px}

.seccion{
  font-family:'Barlow Condensed',sans-serif;
  font-size:21px;
  font-weight:600;
  color:var(--tinta-suave);
  border-bottom:1px solid var(--linea);
  padding-bottom:5px;
  margin:28px 0 14px;
}
.seccion:first-child{margin-top:0}
.seccion .cuenta{float:right;font-weight:400}

/* ------------------------------------------------- la fila de pendiente */

.item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:var(--blanco);
  border:1px solid var(--linea);
  border-left-width:5px;
  border-left-color:var(--linea);
  padding:13px 14px;
  margin-bottom:9px;
}
.item.critico{border-left-color:var(--rojo)}
.item.alto{border-left-color:var(--ambar)}
.item.normal{border-left-color:var(--verde)}
.item.urgente{background:#FCF3F2}
.item.listo{opacity:.42}

/* El numero de interno es el ancla: es lo primero que se busca */
.interno{
  font-family:'Barlow Condensed',sans-serif;
  font-size:30px;
  font-weight:700;
  line-height:1;
  color:var(--tinta);
  background:var(--papel);
  border:2px solid var(--tinta);
  padding:6px 9px 4px;
  min-width:68px;
  text-align:center;
  flex-shrink:0;
}
.interno.sin{
  color:var(--tinta-suave);
  border-color:var(--linea);
  border-style:dashed;
  font-size:14px;
  font-family:'Barlow',sans-serif;
  font-weight:500;
  padding:12px 8px;
}

.cuerpo{flex:1;min-width:0}
.que{font-weight:500;margin-bottom:2px;overflow-wrap:break-word}
.dato{font-size:14.5px;color:var(--tinta-suave)}
.dato .urg{color:var(--rojo);font-weight:600}
.original{
  font-size:14.5px;
  color:var(--tinta-suave);
  border-left:2px solid var(--linea);
  padding-left:9px;
  margin-top:7px;
}

/* Objetivo grande: se usa de pie, con las manos sucias */
.marca{
  width:46px;height:46px;
  flex-shrink:0;
  border:2px solid var(--tinta);
  background:var(--blanco);
  cursor:pointer;
  position:relative;
}
.marca:hover{background:#EAF2EC}
.marca:focus-visible{outline:3px solid var(--verde);outline-offset:2px}
.marca.hecho{background:var(--verde);border-color:var(--verde)}
.marca.hecho::after{
  content:'';
  position:absolute;left:14px;top:8px;
  width:12px;height:22px;
  border:solid var(--blanco);
  border-width:0 3.5px 3.5px 0;
  transform:rotate(43deg);
}

/* ------------------------------------------------------------- formulario */

.tarjeta{
  background:var(--blanco);
  border:1px solid var(--linea);
  padding:18px;
}
label{display:block;font-size:14.5px;color:var(--tinta-suave);margin-bottom:5px}
input[type=text],textarea,select{
  width:100%;
  font:inherit;
  padding:11px 12px;
  border:1px solid var(--linea);
  background:var(--papel);
  color:var(--tinta);
  border-radius:0;
}
input:focus,textarea:focus,select:focus{
  outline:2px solid var(--tinta);
  outline-offset:-2px;
  background:var(--blanco);
}
textarea{min-height:82px;resize:vertical}
.campo{margin-bottom:16px}

.sectores{display:flex;gap:9px;flex-wrap:wrap}
.sector{
  font-family:'Barlow Condensed',sans-serif;
  font-size:19px;font-weight:600;
  padding:11px 17px;
  border:2px solid var(--linea);
  background:var(--blanco);
  cursor:pointer;
  user-select:none;
}
.sector:hover{border-color:var(--tinta-suave)}
.sector.puesto{background:var(--tinta);border-color:var(--tinta);color:var(--blanco)}

.boton{
  font-family:'Barlow Condensed',sans-serif;
  font-size:21px;font-weight:600;
  background:var(--verde);
  color:var(--blanco);
  border:none;
  padding:13px 26px;
  cursor:pointer;
}
.boton:hover{background:#246C48}
.boton:disabled{background:var(--linea);color:var(--tinta-suave);cursor:default}
.boton.tenue{background:none;color:var(--tinta);border:2px solid var(--tinta)}
.boton.tenue:hover{background:var(--tinta);color:var(--blanco)}

.pie{
  position:fixed;left:0;right:0;bottom:0;
  background:var(--blanco);
  border-top:1px solid var(--linea);
  padding:11px 16px;
}
.pie .caja{max-width:760px;margin:0 auto;display:flex;gap:11px;align-items:center}
.pie .resumen{font-size:14.5px;color:var(--tinta-suave);margin-right:auto}

.vacio{
  text-align:center;
  padding:38px 20px;
  color:var(--tinta-suave);
  border:1px dashed var(--linea);
}
.aviso{
  background:#FCF3F2;
  border-left:4px solid var(--rojo);
  padding:11px 14px;
  margin-bottom:14px;
  font-size:15.5px;
}
.aviso.bien{background:#EDF6F0;border-left-color:var(--verde)}

/* ------------------------------------------------------------- ingreso */

.ingreso{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.ingreso .caja{width:100%;max-width:340px}
.ingreso h1{
  font-family:'Barlow Condensed',sans-serif;
  font-size:38px;font-weight:700;
  line-height:1.05;
  margin-bottom:3px;
}
.ingreso .sub{color:var(--tinta-suave);margin-bottom:26px;font-size:15.5px}

@media (max-width:560px){
  .interno{font-size:26px;min-width:60px}
  .marca{width:44px;height:44px}
  main{padding:16px 12px 90px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ------------------------------------------------ navegacion (v0.2) */
/* Enlaces de la barra: solo los que el rol habilita (comun.js los arma
   desde los permisos de la sesion). */
.nav{display:flex;gap:6px;flex-wrap:wrap;width:100%;order:3}
.nav a{
  color:#A9BACA;text-decoration:none;font-size:14.5px;
  padding:4px 10px;border:1px solid transparent;border-radius:3px;
}
.nav a:hover{color:var(--blanco);border-color:#3C5064}
.nav a.actual{color:var(--blanco);border-color:#6E8296}

/* Tablas de consulta (usuarios, aceite, difusiones) */
.tabla{width:100%;border-collapse:collapse;background:var(--blanco);border:1px solid var(--linea);font-size:15.5px}
.tabla th,.tabla td{padding:9px 10px;border-bottom:1px solid var(--linea);text-align:left;vertical-align:top}
.tabla th{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:600;color:var(--tinta-suave);background:var(--papel)}
.tabla tr.inactivo td{color:var(--tinta-suave)}
.tabla .accion{background:none;border:1px solid var(--linea);padding:4px 9px;font:inherit;font-size:14px;cursor:pointer;border-radius:3px}
.tabla .accion:hover{border-color:var(--tinta-suave)}
@media (max-width:600px){ .tabla .opcional{display:none} }

.fila-campos{display:flex;gap:10px;flex-wrap:wrap}
.fila-campos .campo{flex:1;min-width:160px}
.etiqueta{font-size:13px;padding:2px 8px;border:1px solid var(--linea);color:var(--tinta-suave);white-space:nowrap;border-radius:3px}
.etiqueta.ok{border-color:var(--verde);color:var(--verde)}
.etiqueta.mal{border-color:var(--rojo);color:var(--rojo)}
.etiqueta.aviso{border-color:var(--ambar);color:#9A6C14}
.sugerencias{background:var(--blanco);border:1px solid var(--linea);max-height:200px;overflow:auto;margin-top:-8px;margin-bottom:12px}
.sugerencias div{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--linea)}
.sugerencias div:hover{background:var(--papel)}
.casilla{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--linea);font-size:16px}
.casilla input[type=checkbox]{width:26px;height:26px;flex-shrink:0}
.casilla .interno{font-size:22px;min-width:60px;padding:4px 7px 3px}
.radio-grupo{display:flex;gap:6px;flex-wrap:wrap}
.radio-grupo label{font-size:15px;padding:7px 12px;border:1px solid var(--linea);background:var(--blanco);cursor:pointer;margin:0}
.radio-grupo input{display:none}
.radio-grupo input:checked+span{font-weight:600}
.radio-grupo label:has(input:checked){background:var(--tinta);color:var(--blanco);border-color:var(--tinta)}
.pestanias{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.pestania{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:600;padding:8px 14px;border:1px solid var(--linea);background:var(--blanco);cursor:pointer;color:var(--tinta-suave)}
.pestania.puesta{background:var(--tinta);color:var(--blanco);border-color:var(--tinta)}
.panel-pestania{display:none}
.panel-pestania.visible{display:block}