/* ====== SGC CET · estilo escritorio (basado en APLICACION SGC CET.html) ====== */
:root{
  --tinta:#2b3a55; --rojo:#d9534f; --amarillo:#feff9c; --rosa:#ffd6e7;
  --verde:#d3f8b6; --celeste:#cdeafe; --azul:#1a2b4a; --verde2:#1a6b3c;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.08), transparent 40%),
    repeating-linear-gradient(88deg, rgba(0,0,0,.05) 0 3px, transparent 3px 90px),
    repeating-linear-gradient(2deg, rgba(255,255,255,.03) 0 2px, transparent 2px 70px),
    linear-gradient(135deg,#9a6a43,#7d5233 55%,#6d4629);
  font-family:'Segoe Print','Bradley Hand','Comic Sans MS',cursive;
  color:var(--tinta);
  padding:20px 14px 80px;
}
#desk{max-width:1150px;margin:0 auto;position:relative}

/* ---- cabecera ---- */
header.cet{display:flex;align-items:center;gap:18px;margin-bottom:24px;flex-wrap:wrap}
#logo-wrap{background:#fff;border-radius:14px;padding:8px 12px 5px;transform:rotate(-3deg);
  box-shadow:3px 5px 14px rgba(0,0,0,.45);position:relative}
#logo-wrap .logotxt{font-family:Georgia,serif;font-weight:bold;font-size:1.5em;color:var(--azul);padding:8px 6px}
.pin{position:absolute;top:-9px;left:50%;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff8a80,#c62828 65%,#7f0000);
  box-shadow:0 3px 4px rgba(0,0,0,.4)}
h1.cet{font-family:Georgia,'Times New Roman',serif;font-size:1.9em;line-height:1.15;margin:0;
  color:#fff;text-shadow:2px 3px 0 rgba(0,0,0,.35);transform:rotate(-.5deg)}
h1.cet small{display:block;font-size:.45em;font-weight:normal;color:#ffe9b0;font-family:'Segoe Print',cursive}

/* ---- navegación tipo pestañas de carpeta ---- */
nav.cet{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 6px}
nav.cet a, nav.cet button{
  font-family:inherit;font-size:.95em;text-decoration:none;color:var(--tinta);
  background:var(--amarillo);border:none;border-radius:8px 8px 0 0;padding:8px 16px 6px;cursor:pointer;
  box-shadow:0 -2px 5px rgba(0,0,0,.15) inset,2px -2px 6px rgba(0,0,0,.2);
  transform:rotate(-.4deg)
}
nav.cet a:nth-child(2n){background:var(--celeste);transform:rotate(.4deg)}
nav.cet a:nth-child(3n){background:var(--rosa)}
nav.cet a.activa, nav.cet a:hover{background:#fff}
nav.cet form{display:inline}
nav.cet button{background:var(--rojo);color:#fff}

/* ---- papel rayado ---- */
.paper{
  background:
    linear-gradient(90deg, transparent 54px, rgba(217,83,79,.5) 54px 56px, transparent 56px),
    repeating-linear-gradient(#fdfcf4 0 27px, #cfe0f0 27px 28px);
  border-radius:3px;padding:30px 26px 24px 72px;margin:24px 0;position:relative;
  box-shadow:0 1px 2px rgba(0,0,0,.2),0 8px 22px rgba(0,0,0,.35);
}
.paper::before{content:"";position:absolute;left:20px;top:40px;bottom:40px;width:14px;
  background:radial-gradient(circle 7px, #7d5233 6px, transparent 7px);
  background-size:14px 90px;background-repeat:repeat-y}
.paper.tilt-l{transform:rotate(-.7deg)} .paper.tilt-r{transform:rotate(.55deg)}
.tape{position:absolute;top:-13px;left:calc(50% - 60px);width:120px;height:30px;background:rgba(255,244,180,.6);
  border-left:1px dashed rgba(0,0,0,.12);border-right:1px dashed rgba(0,0,0,.12);
  box-shadow:0 2px 4px rgba(0,0,0,.18);transform:rotate(-2deg)}
.paper h2{font-family:Georgia,serif;margin:0 0 14px;color:var(--azul);font-size:1.35em}
.paper h3{margin:18px 0 8px;color:var(--azul)}

/* ---- post-it ---- */
.postit{background:var(--amarillo);padding:14px 16px;border-radius:2px;display:inline-block;
  box-shadow:2px 4px 10px rgba(0,0,0,.3);transform:rotate(-1.5deg);margin:8px 12px 8px 0;max-width:280px}
.postit.rosa{background:var(--rosa);transform:rotate(1.2deg)}
.postit.verde{background:var(--verde);transform:rotate(.8deg)}
.postit.celeste{background:var(--celeste)}
.postit b{display:block;font-size:1.5em}

/* ---- formularios ---- */
label.cet{display:block;margin:10px 0 2px;font-size:.92em}
input.cet, select.cet, textarea.cet{
  font-family:inherit;font-size:1em;color:var(--tinta);width:100%;
  background:rgba(255,255,255,.75);border:none;border-bottom:2px dashed #6b7a99;
  padding:8px 10px;border-radius:6px 6px 0 0;outline:none;
}
input.cet:focus, select.cet:focus, textarea.cet:focus{background:#fff;border-bottom-color:var(--rojo)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 18px}

/* ---- botones ---- */
.btn{
  font-family:inherit;font-size:1.02em;cursor:pointer;border:none;border-radius:10px;
  padding:10px 22px;background:var(--azul);color:#fff;box-shadow:2px 4px 8px rgba(0,0,0,.3);
  text-decoration:none;display:inline-block;margin:6px 4px 0 0;
}
.btn:hover{transform:translateY(-1px)}
.btn.verde{background:var(--verde2)} .btn.rojo{background:var(--rojo)}
.btn.chico{font-size:.85em;padding:5px 12px}
.btn.fantasma{background:transparent;color:var(--azul);border:2px dashed var(--azul);box-shadow:none}

/* ---- tablas ---- */
table.cet{width:100%;border-collapse:collapse;font-size:.92em;background:rgba(255,255,255,.6)}
table.cet th{background:var(--azul);color:#fff;padding:7px 8px;text-align:left;font-family:Georgia,serif}
table.cet td{padding:6px 8px;border-bottom:1px solid #cfe0f0}
table.cet tr:hover td{background:var(--amarillo)}

/* ---- avance ---- */
.barra{background:rgba(0,0,0,.15);border-radius:20px;height:22px;overflow:hidden;margin:6px 0}
.barra>span{display:block;height:100%;background:linear-gradient(90deg,var(--verde2),#4caf50);
  color:#fff;font-size:.75em;text-align:center;line-height:22px;min-width:34px}
.barra.roja>span{background:linear-gradient(90deg,#b23b38,var(--rojo))}

/* ---- checklist docs ---- */
.doc-item{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px dashed #a9b9d0;flex-wrap:wrap}
.doc-item .check{font-size:1.3em;width:28px;text-align:center}
.ok{color:var(--verde2)} .falta{color:var(--rojo)}
.chip{background:var(--celeste);border-radius:12px;padding:2px 10px;font-size:.78em;margin:2px}

/* ---- flash ---- */
.flash{background:var(--verde);border-left:6px solid var(--verde2);padding:10px 16px;border-radius:6px;
  margin:12px 0;box-shadow:2px 3px 8px rgba(0,0,0,.2)}
.flash.error{background:#ffd6d6;border-left-color:var(--rojo)}

/* ---- móvil 9:16 (perfil administrativo) ---- */
.solo-movil{display:none}
@media (max-width:640px){
  body{padding:10px 8px 90px}
  .grid2,.grid3{grid-template-columns:1fr}
  .paper{padding:22px 14px 18px 46px}
  .paper::before{left:8px}
  h1.cet{font-size:1.3em}
  #logo-wrap .logotxt{font-size:1.1em}
  nav.cet a,nav.cet button{padding:10px 12px;font-size:1em}
  .btn{width:100%;text-align:center;padding:15px;font-size:1.15em}
  .btn.chico{width:auto;padding:6px 12px;font-size:.85em}
  table.cet{font-size:.8em}
  .solo-movil{display:block}
  /* botonera fija inferior para administrativo */
  .dock{position:fixed;left:0;right:0;bottom:0;background:rgba(43,58,85,.97);display:flex;z-index:50}
  .dock a{flex:1;text-align:center;color:#fff;text-decoration:none;padding:12px 4px;font-size:.85em}
  .dock a.activa{background:var(--rojo)}
  .captura-grande{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    background:var(--amarillo);border:3px dashed var(--rojo);border-radius:18px;
    padding:46px 20px;font-size:1.25em;cursor:pointer;text-align:center;
  }
  .captura-grande span.icono{font-size:3em}
}
@media (min-width:641px){ .dock{display:none} }