/* ============================================================
   app.css — taller de hojalatería y pintura
   Escrito primero para el celular del patio; el escritorio es
   el caso ampliado. Paleta del propio taller: acero, tinta de
   mimeógrafo, cinta de enmascarar y franja amarilla de nave.
   ============================================================ */
:root{
  --ink:#16191d;
  --steel:#2b3138;
  --steel-2:#454e57;
  --paper:#f4f5f2;
  --card:#ffffff;
  --line:#d9ddd7;
  --amber:#ffb400;
  --amber-deep:#a97600;
  --red:#c0392b;
  --green:#2e7d54;
  --radius:3px;
  --toque:44px;              /* área mínima para el pulgar */
  --shadow:0 1px 0 rgba(22,25,29,.06), 0 8px 24px -18px rgba(22,25,29,.5);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper);
  color:var(--ink);
  font:400 15px/1.55 "IBM Plex Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3,.display{
  font-family:"Barlow Condensed",system-ui,sans-serif;
  font-weight:600;text-transform:uppercase;letter-spacing:.035em;margin:0;
}
h1{font-size:24px}
h2{font-size:19px}
h3{font-size:15px;letter-spacing:.08em}
a{color:var(--steel)}
code,.mono,.folio{font-family:"IBM Plex Mono",ui-monospace,monospace}
img{max-width:100%}

/* --- Franja de peligro: la firma visual del sistema ---------- */
.hazard{height:6px;background:repeating-linear-gradient(-45deg,
  var(--amber) 0 14px, var(--ink) 14px 28px)}

/* --- Barra superior ----------------------------------------- */
.topbar{background:var(--ink);color:#fff;position:sticky;top:0;z-index:30}
.topbar-in{max-width:1120px;margin:0 auto;padding:11px 16px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;font-size:17px;color:#fff;text-decoration:none;margin-right:auto}
.brand span{color:var(--amber)}
.menu-btn{width:var(--toque);height:var(--toque);display:grid;align-content:center;
  justify-items:center;gap:5px;cursor:pointer;margin:-6px -8px -6px 0}
.menu-btn span{width:22px;height:2px;background:#fff;display:block}
.topnav{display:none;width:100%;flex-direction:column;gap:0;padding-top:6px;
  border-top:1px solid #2b3138}
.menu-check:checked ~ .topnav{display:flex}
.topnav a{color:#c8cdd3;text-decoration:none;font-size:15px;
  padding:12px 2px;border-bottom:1px solid #22272c;min-height:var(--toque);
  display:flex;align-items:center}
.topnav a:hover,.topnav a.on{color:var(--amber)}
.whoami{font-size:11px;color:#79828c;text-transform:uppercase;letter-spacing:.08em;
  padding:10px 2px 4px}

main{max-width:1120px;margin:0 auto;padding:16px 14px 96px}

/* --- Tarjetas ----------------------------------------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:16px}
.card-h{padding:12px 14px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card-b{padding:14px}
.card-h h1,.card-h h2,.card-h h3{margin-right:auto}

/* --- Formularios -------------------------------------------- */
.grid{display:grid;gap:13px;grid-template-columns:1fr}
label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--steel-2);margin-bottom:5px;font-weight:600}
input[type=text],input[type=date],input[type=number],input[type=password],
input[type=tel],select,textarea{
  width:100%;padding:11px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;color:var(--ink);
  font:inherit;font-size:16px;              /* 16px evita el zoom de iOS al enfocar */
  min-height:var(--toque);
}
textarea{min-height:110px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible,
button:focus-visible,a:focus-visible,.menu-btn:focus-within{
  outline:2px solid var(--amber);outline-offset:2px}
.check{display:flex;align-items:center;gap:9px;font-size:15px;min-height:var(--toque);
  text-transform:none;letter-spacing:0;color:var(--ink);font-weight:400}
.check input{width:22px;height:22px}
.hint{font-size:12px;color:var(--steel-2);margin:0}
.ancho2{grid-column:auto}

/* --- Botones ------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:16px;
  text-transform:uppercase;letter-spacing:.07em;text-decoration:none;
  padding:10px 16px;min-height:var(--toque);
  border:1px solid var(--ink);border-radius:var(--radius);
  background:var(--ink);color:#fff}
.btn:hover{background:var(--steel)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-amber{background:var(--amber);border-color:var(--amber-deep);color:var(--ink)}
.btn-amber:hover{background:#ffc738}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:#eceee9}
.btn-danger{background:#fff;color:var(--red);border-color:#e6b7b1}
.btn-sm{padding:6px 11px;min-height:36px;font-size:14px}
.acciones{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

/* Barra de guardar: siempre al alcance del pulgar */
.barra-accion{position:sticky;bottom:0;z-index:20;display:flex;gap:10px;align-items:center;
  background:rgba(244,245,242,.94);backdrop-filter:blur(6px);
  border-top:1px solid var(--line);
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  margin:0 -14px -96px}
.barra-accion .btn{flex:1}
.solo-ancho{display:none}

/* --- Tabla que se vuelve fichas en el celular --------------- */
table{width:100%;border-collapse:collapse}
thead{display:none}
tbody tr{display:block;border-bottom:1px solid var(--line);padding:10px 4px}
tbody td{display:flex;gap:12px;padding:5px 10px;border:0;align-items:baseline}
tbody td:before{content:attr(data-l);flex:0 0 84px;
  font:600 10px/1.7 "IBM Plex Sans",sans-serif;text-transform:uppercase;
  letter-spacing:.09em;color:var(--steel-2)}
tbody td[data-l=""]:before,tbody td:not([data-l]):before{content:none}
tbody td[data-l="Folio"]{font-size:17px;font-weight:700}
.vacio{display:block;padding:40px 16px;text-align:center;color:var(--steel-2)}
.vacio:before{content:none !important}

/* --- Etiquetas de estatus ----------------------------------- */
.tag{display:inline-block;font:600 11px/1 "IBM Plex Sans",sans-serif;text-transform:uppercase;
  letter-spacing:.08em;padding:5px 8px;border-radius:2px;border:1px solid}
.t-recibido  {background:#eef3f7;border-color:#cddce7;color:#2b5670}
.t-en_proceso{background:#fff4dd;border-color:#f0d59a;color:#7a5600}
.t-terminado {background:#e9f5ee;border-color:#bcdcc8;color:#1f6641}
.t-entregado {background:#efefee;border-color:#d9ddd7;color:#5b6169}

/* --- Avisos ------------------------------------------------- */
.aviso{padding:11px 14px;border-radius:var(--radius);margin-bottom:14px;font-size:14px;
  border-left:4px solid}
.aviso-ok{background:#e9f5ee;border-color:var(--green);color:#1f6641}
.aviso-err{background:#fdeceb;border-color:var(--red);color:#8e2a20}

/* --- Diagrama ----------------------------------------------- */
.tabs{display:flex;gap:6px;overflow-x:auto;padding:0 0 10px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;cursor:pointer;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:9px 13px;min-height:40px;
  font:600 13px/1 "IBM Plex Sans",sans-serif;color:var(--steel-2);white-space:nowrap}
.tab.on{background:var(--ink);border-color:var(--ink);color:var(--amber)}

.diagrama-wrap{display:grid;grid-template-columns:1fr;gap:14px}
.lienzo{background:#eceee9;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:grid;place-items:center}
.lienzo svg{display:block;width:100%;height:auto;touch-action:manipulation}
.lienzo.editable{cursor:crosshair}
.marca{cursor:grab;touch-action:none}
.marca text{pointer-events:none}
.paleta h3{margin-bottom:9px}
.paleta-op{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 11px;margin-bottom:6px;border:1px solid var(--line);background:#fff;
  border-radius:var(--radius);cursor:pointer;font:inherit;font-size:14px;min-height:var(--toque)}
.paleta-op.on{border-color:var(--ink);box-shadow:inset 3px 0 0 var(--ink)}
.chip{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font:700 11px/1 "IBM Plex Mono",monospace;flex:none}
.lista-marcas{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.lista-marcas ul{margin:0;padding:0}
.lista-marcas li{display:flex;gap:9px;align-items:center;font-size:14px;
  padding:7px 0;border-bottom:1px dashed #e3e6e1;list-style:none}
.borrar-marca{margin-left:auto;border:0;background:none;color:var(--red);cursor:pointer;
  font-size:17px;line-height:1;padding:6px 10px;min-height:var(--toque)}

/* Hoja de captura del detalle */
.hoja-fondo{position:fixed;inset:0;background:rgba(22,25,29,.55);z-index:60;
  display:flex;align-items:flex-end;justify-content:center}
.hoja{width:min(460px,100%);background:#fff;border-radius:10px 10px 0 0;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  max-height:88vh;overflow:auto;animation:subir .18s ease-out}
@keyframes subir{from{transform:translateY(14px);opacity:.4}to{transform:none;opacity:1}}
.hoja h3{margin-bottom:12px}
.hoja-codigos{margin-bottom:14px}
.hoja-pie{display:flex;gap:8px;align-items:center;margin-top:16px}

/* --- Fotos antes / después ---------------------------------- */
.fotos-cols{display:grid;grid-template-columns:1fr;gap:14px}
.col-fotos{border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.col-h{padding:10px 12px;border-bottom:1px solid var(--line);display:flex;
  align-items:center;gap:10px}
.col-h .marcador{font:600 11px/1 "IBM Plex Sans",sans-serif;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 8px;border-radius:2px}
.m-antes{background:var(--ink);color:var(--amber)}
.m-despues{background:var(--amber);color:var(--ink)}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:8px;padding:12px}
.galeria:empty{display:none}
.previa{padding:12px 0 0}
.foto{position:relative;border:1px solid var(--line);border-radius:2px;overflow:hidden;
  background:#eceee9;margin:0}
.foto img{display:block;width:100%;height:96px;object-fit:cover}
.foto figcaption{font-size:11px;padding:5px 6px;color:var(--steel-2);
  border-top:1px solid var(--line);background:#fff}
.foto .quitar{position:absolute;top:3px;right:3px;background:rgba(22,25,29,.85);color:#fff;
  border:0;border-radius:2px;cursor:pointer;font-size:13px;width:30px;height:30px}
.subir{padding:0 12px 14px;display:grid;gap:11px}
.captura{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.captura .btn{position:relative;overflow:hidden;font-size:14px;padding:10px 8px}
.captura input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;
  font-size:0;min-height:0}
.barra{width:100%;height:8px;appearance:none;border:0;
  background:#eceee9;border-radius:99px;overflow:hidden}
.barra::-webkit-progress-bar{background:#eceee9}
.barra::-webkit-progress-value{background:var(--amber)}
.barra::-moz-progress-bar{background:var(--amber)}

/* --- Login -------------------------------------------------- */
.login-body{min-height:100vh;display:grid;place-items:center;background:var(--ink);padding:14px}
.login-card{width:min(380px,100%);background:#fff;border-radius:var(--radius);
  overflow:hidden;box-shadow:0 30px 70px -30px #000}
.login-top{background:var(--ink);color:#fff;padding:20px 22px}
.login-top p{margin:6px 0 0;font-size:12px;color:#8c949c;line-height:1.5}
.login-card form{padding:20px 22px 24px}
.login-card .btn{width:100%;margin-top:12px}

/* ============ De tableta hacia arriba ====================== */
@media (min-width:821px){
  h1{font-size:30px} h2{font-size:21px}
  main{padding:26px 20px 70px}
  .topbar{position:static}
  .topbar-in{padding:14px 20px}
  .brand{font-size:19px;margin-right:0}
  .menu-btn{display:none}
  .topnav{display:flex !important;flex-direction:row;width:auto;margin-left:auto;
    gap:16px;align-items:center;border:0;padding:0}
  .topnav a{font-size:14px;padding:0;border:0;min-height:0}
  .whoami{padding:0}
  .card-h,.card-b{padding-left:18px;padding-right:18px}
  .ancho2{grid-column:span 2}
  .g2{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
  .diagrama-wrap{grid-template-columns:1fr 230px}
  .fotos-cols{grid-template-columns:1fr 1fr}
  .captura{grid-template-columns:auto auto;justify-content:start}

  thead{display:table-header-group}
  th{font:600 11px/1 "IBM Plex Sans",sans-serif;text-transform:uppercase;letter-spacing:.09em;
    color:var(--steel-2);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
  tbody tr{display:table-row;padding:0}
  tbody tr:hover{background:#fbfcfa}
  tbody td{display:table-cell;padding:11px 12px;border-bottom:1px solid #eceee9;
    vertical-align:middle}
  tbody td:before{content:none}
  tbody td[data-l="Folio"]{font-size:15px;font-weight:400}
  .vacio{display:table-cell}

  .barra-accion{position:static;background:none;border:0;backdrop-filter:none;
    padding:0;margin:0;flex-direction:row-reverse;justify-content:flex-end}
  .barra-accion .btn{flex:0 0 auto}
  .solo-ancho{display:inline}
  .hoja-fondo{align-items:center}
  .hoja{border-radius:6px}
}

/* --- Impresión ---------------------------------------------- */
@media print{
  .topbar,.hazard,.no-print,.paleta,.tabs,.barra-accion{display:none !important}
  body{background:#fff}
  main{max-width:none;padding:0}
  .card{box-shadow:none;break-inside:avoid}
  .diagrama-wrap{grid-template-columns:1fr}
  thead{display:table-header-group}
  tbody tr{display:table-row}
  tbody td{display:table-cell}
  tbody td:before{content:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}