/* =====================================================================
   Seguimiento de Tareas — hoja de estilo única
   ===================================================================== */

:root{
  --azul:#2563eb; --azul-osc:#1d4ed8; --azul-claro:#eff6ff;
  --texto:#0f172a; --tenue:#64748b; --borde:#e2e8f0; --fondo:#f1f5f9;
  --blanco:#fff; --verde:#16a34a; --rojo:#dc2626; --naranja:#f59e0b;
  --morado:#7c3aed; --radio:12px;
  --sombra:0 1px 2px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.05);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--fondo); color:var(--texto); font-size:15px; line-height:1.5;
}
a{color:var(--azul); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 12px; line-height:1.25}
h1{font-size:26px} h2{font-size:20px} h3{font-size:17px}
.tenue{color:var(--tenue)}
small{font-size:12.5px}

/* ------------------------------ Barra ------------------------------ */
.barra{background:#0f172a; color:#e2e8f0; position:sticky; top:0; z-index:50}
.barra-in{max-width:1400px; margin:0 auto; padding:0 18px; display:flex; align-items:center; gap:18px; min-height:58px; flex-wrap:wrap}
.marca{color:#fff; font-weight:700; font-size:16px; display:flex; align-items:center; gap:8px; white-space:nowrap}
.marca:hover{text-decoration:none}
.marca-ico{background:var(--azul); width:26px; height:26px; border-radius:7px; display:grid; place-items:center; font-size:13px}
.nav{display:flex; gap:4px; flex:1; flex-wrap:wrap}
.nav a{color:#cbd5e1; padding:8px 13px; border-radius:8px; font-size:14px; font-weight:500}
.nav a:hover{background:#1e293b; color:#fff; text-decoration:none}
.nav a.act{background:var(--azul); color:#fff}
.usuario{display:flex; align-items:center; gap:9px}
.usuario-txt{display:flex; flex-direction:column; line-height:1.15; margin-right:4px}
.usuario-txt b{font-size:13px; color:#fff}
.usuario-txt small{color:#94a3b8; font-size:11px}
.avatar{width:32px; height:32px; border-radius:50%; background:var(--azul); color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px}
.menu-btn{display:none; background:#1e293b; color:#fff; border:0; font-size:19px; border-radius:8px; padding:5px 11px; cursor:pointer}

/* --------------------------- Contenedor ---------------------------- */
.contenedor{max-width:1400px; margin:0 auto; padding:22px 18px 60px}
.pie{text-align:center; color:var(--tenue); font-size:12.5px; padding:16px}

/* ---------------------------- Tarjetas ----------------------------- */
.tarjeta{background:var(--blanco); border:1px solid var(--borde); border-radius:var(--radio); padding:18px; box-shadow:var(--sombra); margin-bottom:18px}
.tarjeta-cab{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.tarjeta-cab h2,.tarjeta-cab h1{margin:0}

.rejilla{display:grid; gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g-2-1{grid-template-columns:2fr 1fr}

/* ------------------------------ KPI -------------------------------- */
.kpi{background:var(--blanco); border:1px solid var(--borde); border-left:4px solid var(--azul); border-radius:var(--radio); padding:15px 17px; box-shadow:var(--sombra)}
.kpi .n{font-size:29px; font-weight:700; line-height:1}
.kpi .t{color:var(--tenue); font-size:12.5px; text-transform:uppercase; letter-spacing:.4px; margin-top:5px}
.kpi.v{border-left-color:var(--verde)} .kpi.r{border-left-color:var(--rojo)}
.kpi.n-{border-left-color:var(--naranja)} .kpi.m{border-left-color:var(--morado)}

/* ---------------------------- Botones ------------------------------ */
.btn{display:inline-block; background:var(--azul); color:#fff; border:1px solid var(--azul); padding:9px 15px; border-radius:9px; font-size:14px; font-weight:600; cursor:pointer; text-align:center; font-family:inherit}
.btn:hover{background:var(--azul-osc); text-decoration:none; color:#fff}
.btn-min{padding:6px 11px; font-size:12.5px}
.btn-gris{background:#475569; border-color:#475569}
.btn-gris:hover{background:#334155}
.btn-rojo{background:var(--rojo); border-color:var(--rojo)} .btn-rojo:hover{background:#b91c1c}
.btn-verde{background:var(--verde); border-color:var(--verde)} .btn-verde:hover{background:#15803d}
.btn-borde{background:transparent; color:var(--texto); border-color:var(--borde)}
.btn-borde:hover{background:var(--fondo); color:var(--texto)}
.btn[disabled]{opacity:.55; cursor:not-allowed}

/* --------------------------- Formularios --------------------------- */
.campo{margin-bottom:14px}
.campo label{display:block; font-size:13px; font-weight:600; margin-bottom:5px}
input[type=text],input[type=password],input[type=email],input[type=date],input[type=number],
input[type=search],input[type=tel],input[type=file],select,textarea{
  width:100%; padding:9px 11px; border:1px solid var(--borde); border-radius:9px;
  font-size:14px; font-family:inherit; background:#fff; color:var(--texto);
}
input:focus,select:focus,textarea:focus{outline:2px solid #bfdbfe; border-color:var(--azul)}
textarea{min-height:90px; resize:vertical}
.fila{display:flex; gap:12px; flex-wrap:wrap}
.fila>*{flex:1; min-width:170px}
.ayuda{font-size:12px; color:var(--tenue); margin-top:4px}

/* ---------------------------- Tablas ------------------------------- */
.tabla-wrap{overflow-x:auto; border-radius:var(--radio)}
table{width:100%; border-collapse:collapse; background:#fff; font-size:14px}
th,td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--borde); vertical-align:middle}
th{background:#f8fafc; font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--tenue); white-space:nowrap}
th a{color:var(--tenue)}
tbody tr:hover{background:#f8fafc}
.vacio{text-align:center; color:var(--tenue); padding:40px 16px}

/* ---------------------------- Badges ------------------------------- */
.badge{display:inline-block; padding:3px 9px; border-radius:20px; font-size:11.5px; font-weight:700; white-space:nowrap}
.b-pendiente{background:#f1f5f9; color:#475569}
.b-en_proceso{background:#dbeafe; color:#1d4ed8}
.b-en_revision{background:#ede9fe; color:#6d28d9}
.b-completada{background:#dcfce7; color:#15803d}
.b-cancelada{background:#fee2e2; color:#b91c1c}
.p-baja{background:#f1f5f9; color:#475569}
.p-media{background:#e0f2fe; color:#0369a1}
.p-alta{background:#ffedd5; color:#c2410c}
.p-urgente{background:#fee2e2; color:#b91c1c}

.chip{display:inline-block; padding:2px 8px; border-radius:6px; font-size:11.5px; font-weight:600}
.chip-rojo{background:#fee2e2; color:#b91c1c}
.chip-naranja{background:#ffedd5; color:#c2410c}
.chip-verde{background:#dcfce7; color:#15803d}
.chip-gris{background:#f1f5f9; color:#64748b}
.chip-ok{background:#e0e7ff; color:#4338ca}

.pastilla-area{display:inline-block; padding:3px 9px; border-radius:20px; font-size:11.5px; font-weight:700; color:#fff}

/* --------------------------- Progreso ------------------------------ */
.progreso{background:#e2e8f0; border-radius:20px; height:8px; overflow:hidden; min-width:70px}
.progreso i{display:block; height:100%; background:var(--azul); border-radius:20px}
.progreso.ok i{background:var(--verde)}

/* --------------------------- Alertas ------------------------------- */
.alerta{padding:11px 15px; border-radius:10px; margin-bottom:14px; font-size:14px; border:1px solid}
.alerta-ok{background:#f0fdf4; border-color:#bbf7d0; color:#166534}
.alerta-error{background:#fef2f2; border-color:#fecaca; color:#991b1b}
.alerta-info{background:#eff6ff; border-color:#bfdbfe; color:#1e40af}
.alerta-aviso{background:#fffbeb; border-color:#fde68a; color:#92400e}

/* ---------------------------- Login -------------------------------- */
.login-caja{max-width:400px; margin:8vh auto; background:#fff; border:1px solid var(--borde); border-radius:16px; padding:32px; box-shadow:0 10px 40px rgba(15,23,42,.10)}
.login-logo{width:52px; height:52px; border-radius:14px; background:var(--azul); color:#fff; display:grid; place-items:center; font-size:24px; margin:0 auto 14px}

/* -------------------------- Evidencias ----------------------------- */
.galeria{display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:12px}
.evi{border:1px solid var(--borde); border-radius:10px; overflow:hidden; background:#fff}
.evi-mini{height:120px; background:#0f172a; display:grid; place-items:center; overflow:hidden; cursor:pointer; position:relative}
.evi-mini img{width:100%; height:100%; object-fit:cover}
.evi-mini .play{position:absolute; font-size:32px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6)}
.evi-mini .doc{color:#94a3b8; font-size:34px}
.evi-pie{padding:8px 10px; font-size:11.5px; color:var(--tenue)}
.evi-pie b{display:block; color:var(--texto); font-size:12.5px; word-break:break-word}
.evi-acc{display:flex; gap:6px; padding:0 10px 9px}

/* ----------------------------- Visor ------------------------------- */
.visor{position:fixed; inset:0; background:rgba(2,6,23,.9); display:none; place-items:center; z-index:200; padding:24px}
.visor.abierto{display:grid}
.visor-cuerpo img,.visor-cuerpo video{max-width:92vw; max-height:86vh; border-radius:10px; display:block}
.visor-x{position:absolute; top:14px; right:22px; color:#fff; font-size:38px; cursor:pointer; line-height:1}

/* ---------------------------- Tablero ------------------------------ */
.kanban{display:grid; grid-template-columns:repeat(5,minmax(230px,1fr)); gap:12px; overflow-x:auto; padding-bottom:8px}
.col-k{background:#e9eef5; border-radius:12px; padding:10px; min-height:200px}
.col-k h4{display:flex; justify-content:space-between; font-size:13px; text-transform:uppercase; letter-spacing:.4px; color:var(--tenue)}
.card-k{background:#fff; border:1px solid var(--borde); border-radius:10px; padding:10px; margin-bottom:9px; box-shadow:var(--sombra)}
.card-k a{font-weight:600; font-size:13.5px; color:var(--texto)}
.card-k .meta{display:flex; justify-content:space-between; align-items:center; margin-top:7px; gap:6px; flex-wrap:wrap}

/* ---------------------------- Línea -------------------------------- */
.linea{list-style:none; margin:0; padding:0}
.linea li{padding:9px 0 9px 18px; border-left:2px solid var(--borde); position:relative; font-size:13.5px}
.linea li:before{content:''; position:absolute; left:-5px; top:14px; width:8px; height:8px; border-radius:50%; background:var(--azul)}

/* --------------------------- Barras -------------------------------- */
.barra-dato{margin-bottom:11px}
.barra-dato .et{display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px}
.barra-dato .pista{background:#e2e8f0; border-radius:20px; height:10px; overflow:hidden}
.barra-dato .pista i{display:block; height:100%; border-radius:20px; background:var(--azul)}

/* --------------------------- Responsive ---------------------------- */
@media (max-width:980px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3,.g-2-1{grid-template-columns:1fr}
}
@media (max-width:760px){
  .menu-btn{display:block; order:2; margin-left:auto}
  .nav{display:none; order:4; width:100%; flex-direction:column; padding-bottom:10px}
  .nav.abierto{display:flex}
  .usuario{order:3; width:100%; padding-bottom:10px}
  .usuario-txt{flex:1}
  .g2,.g4{grid-template-columns:1fr}
  .kanban{grid-template-columns:repeat(5,86vw)}
}
@media print{
  .barra,.pie,.btn,.menu-btn{display:none !important}
  body{background:#fff}
  .tarjeta{box-shadow:none; border-color:#cbd5e1}
}