/* ============================================================================================
   Taller 3D — sistema de diseño (estilo Apple). Lo usan todas las páginas.
   Tokens con los nombres de siempre (--bg, --panel, --ink…) para que el código existente siga funcionando.
   ============================================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..800&display=swap");

:root{
  color-scheme: light;
  --bg:#f5f5f7; --panel:#ffffff; --panel2:#fbfbfd; --soft:#f2f2f7; --fill:rgba(118,118,128,.12); --fill2:rgba(118,118,128,.08);
  --ink:#1d1d1f; --ink2:#6e6e73; --ink3:#86868b; --line:rgba(60,60,67,.14); --line2:rgba(60,60,67,.08);
  --accent:#0071e3; --accent-ink:#ffffff; --accent-soft:rgba(0,113,227,.10);
  --ok:#248a3d; --ok-bg:rgba(52,199,89,.14); --warn:#c93400; --warn-bg:rgba(255,149,0,.16); --bad:#d70015; --bad-bg:rgba(255,59,48,.12);
  --info:#0071e3; --info-bg:rgba(0,113,227,.10);
  --c1:#0071e3; --c2:#5e5ce6; --c3:#ff9f0a; --c4:#30b0c7; --c5:#ff375f; --c6:#8e8e93;
  --r:20px; --r-sm:12px;
  --sombra:0 1px 1px rgba(0,0,0,.02), 0 2px 6px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.05);
  --sombra-alta:0 2px 4px rgba(0,0,0,.04), 0 16px 48px rgba(0,0,0,.12);
  --vidrio:rgba(255,255,255,.72);
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
}
/* Tema claro fijo: se ve igual aunque el aparato esté en modo oscuro. */

/* ---------------- base ---------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.47 var(--font);letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"cv11","ss01";min-height:100vh}
::selection{background:var(--accent-soft)}
a{color:var(--accent)}
.num,td.num,th.num,input[type=number],.kpi .v,.v,.resultado{font-variant-numeric:tabular-nums}
.oculto{display:none!important}
.grow{flex:1}

/* ---------------- barra de navegación translúcida ---------------- */
header, .barra-nav{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px max(20px, env(safe-area-inset-left)) 10px max(20px, env(safe-area-inset-right));min-height:54px;
  background:var(--vidrio);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--line);
}
header h1, .barra-nav h1{font:600 17px/1.2 var(--font-display);letter-spacing:-.022em;margin:0}
.atras{display:inline-flex;align-items:center;gap:2px;color:var(--accent);text-decoration:none;font-size:15px;font-weight:500;padding:6px 4px 6px 0;border-radius:8px}
.atras svg{width:18px;height:18px}
.atras:hover{opacity:.75}
#estado{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink2);white-space:nowrap}
#estado::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg)}
#estado:empty::before{display:none}

/* título grande de la página */
.titulo-grande{max-width:1400px;margin:0 auto;padding:28px 20px 6px}
.titulo-grande h1{font:700 clamp(30px,5vw,40px)/1.08 var(--font-display);letter-spacing:-.03em;margin:0}
.titulo-grande p{margin:8px 0 0;color:var(--ink2);font-size:17px;letter-spacing:-.015em}

/* ---------------- controles ---------------- */
select,input,textarea,button{font:inherit;color:inherit;letter-spacing:inherit}
select,input[type=number],input[type=text],input[type=search],input[type=date],input[type=email],input[type=tel],input:not([type]),textarea{
  width:100%;background:var(--fill2);border:1px solid transparent;border-radius:var(--r-sm);padding:10px 12px;min-height:42px;
  transition:border-color .2s, box-shadow .2s, background .2s;outline:none;-webkit-appearance:none;appearance:none}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2386868b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
select:hover,input:hover,textarea:hover{background-color:var(--fill)}
select:focus,input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);background-color:var(--panel)}
input::placeholder{color:var(--ink3)}
input[type=number]{text-align:right}
input[type=color]{width:42px;height:42px;padding:3px;border:none;border-radius:12px;background:var(--fill2);cursor:pointer}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent);vertical-align:-4px}

button{border:none;background:var(--fill2);color:var(--ink);border-radius:980px;padding:9px 16px;min-height:38px;font-weight:500;cursor:pointer;
  transition:background .2s, transform .12s, opacity .2s, box-shadow .2s;white-space:nowrap}
button:hover{background:var(--fill)}
button:active{transform:scale(.97)}
button:focus-visible{outline:none;box-shadow:0 0 0 4px var(--accent-soft)}
button.pri{background:var(--accent);color:var(--accent-ink);font-weight:600}
button.pri:hover{background:color-mix(in srgb,var(--accent) 88%,#000)}
button.tinte,button.sec{background:var(--accent-soft);color:var(--accent);font-weight:600}
button.mini{padding:5px 12px;min-height:30px;font-size:13px}
button.peligro,button.btn-x,.x{color:var(--bad)}
button.peligro:hover,button.btn-x:hover{background:var(--bad-bg)}
button:disabled{opacity:.38;cursor:not-allowed;transform:none}
button:disabled:hover{background:var(--fill2)}
button.pri:disabled:hover{background:var(--accent)}
#bTema{display:none!important}
.icono{width:38px;height:38px;padding:0;display:inline-grid;place-items:center;font-size:16px}

/* control segmentado (pestañas) */
nav, .segmentado{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:var(--fill2);flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav button, .segmentado button{background:transparent;border-radius:9px;padding:6px 14px;min-height:32px;font-size:14px;font-weight:500;color:var(--ink)}
nav button:hover{background:transparent;opacity:.75}
nav button.on, .segmentado button.on{background:var(--panel);box-shadow:0 1px 2px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.06);font-weight:600;opacity:1}

/* ---------------- tarjetas ---------------- */
main{max-width:1400px;margin:0 auto;padding:18px 20px 60px}
.card{background:var(--panel);border:none;border-radius:var(--r);padding:20px 22px;margin-bottom:18px;box-shadow:var(--sombra)}
.card h2{font:600 20px/1.25 var(--font-display);letter-spacing:-.02em;text-transform:none;color:var(--ink);margin:0 0 14px}
.card h3{font:600 15px/1.3 var(--font);margin:0 0 8px}
.nota,.fila small{color:var(--ink2);font-size:13px;line-height:1.45;letter-spacing:-.005em}
.vacio{padding:36px 20px;text-align:center;color:var(--ink2);font-size:15px}

/* KPIs / widgets */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{background:var(--panel);border:none;border-radius:var(--r);padding:16px 18px;box-shadow:var(--sombra);position:relative;overflow:hidden}
.kpi .t{font-size:13px;color:var(--ink2);font-weight:500}
.kpi .v{font:700 30px/1.1 var(--font-display);letter-spacing:-.03em;margin-top:6px}
.kpi .s{font-size:12.5px;color:var(--ink2);margin-top:4px}
@media (max-width:760px){.kpis{grid-template-columns:repeat(2,1fr);gap:10px} .kpi .v{font-size:26px}}

/* chips y píldoras */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:980px;font-size:12px;font-weight:600;white-space:nowrap;letter-spacing:0}
.chip.bad{background:var(--bad-bg);color:var(--bad)} .chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.ok{background:var(--ok-bg);color:var(--ok)} .chip.info{background:var(--info-bg);color:var(--info)} .chip.gris{background:var(--fill2);color:var(--ink2)}
.pill{border:none;border-radius:980px;padding:6px 14px;font-size:13.5px;font-weight:500;background:var(--fill2);cursor:pointer;transition:background .2s}
.pill:hover{background:var(--fill)}
.pill.on{background:var(--ink);color:var(--bg)}

/* tablas */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:11px 10px;border-bottom:.5px solid var(--line2);text-align:left;vertical-align:middle}
th{font-size:12px;color:var(--ink2);font-weight:500;text-transform:none;letter-spacing:0;border-bottom:.5px solid var(--line)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .15s}
tbody tr:hover td{background:var(--fill2)}
td.num,th.num{text-align:right;white-space:nowrap}
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -8px;padding:0 8px}

/* barras de nivel */
.barra{height:6px;border-radius:3px;background:var(--fill);overflow:hidden;min-width:70px}
.barra i{display:block;height:100%;border-radius:3px;background:var(--ok)}
.barra i.warn{background:var(--warn)} .barra i.bad{background:var(--bad)}

/* muestra de color */
.sw{width:30px;height:30px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), inset 0 -6px 10px rgba(0,0,0,.14), inset 0 4px 8px rgba(255,255,255,.35)}
.sw.chico{width:16px;height:16px;display:inline-block;vertical-align:-3px;margin-right:7px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}

/* diálogos tipo hoja */
dialog{border:none;border-radius:24px;background:var(--panel);color:var(--ink);max-width:520px;width:calc(100% - 32px);padding:24px;box-shadow:var(--sombra-alta)}
dialog::backdrop{background:rgba(0,0,0,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog h3{font:600 20px/1.25 var(--font-display);letter-spacing:-.02em;margin:0 0 14px}
dialog[open]{animation:aparecer .22s cubic-bezier(.2,.8,.2,1)}
@keyframes aparecer{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.derecha{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}

/* entradas de página */
.card,.kpi{animation:subir .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes subir{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

@media (max-width:700px){
  header, .barra-nav{padding:8px 14px;gap:8px}
  main{padding:12px 14px 60px}
  .titulo-grande{padding:20px 16px 2px}
  .card{padding:16px;border-radius:18px;margin-bottom:14px}
  .card h2{font-size:18px}
}

/* ============================================================================================
   Componentes del sistema completo (formularios, hojas, listas, avisos flotantes)
   ============================================================================================ */
.campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.campo > span{font-size:12.5px;font-weight:500;color:var(--ink2)}
.campo small{font-size:12px;color:var(--ink3);line-height:1.35}
.campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.campos .todo,.campos .full{grid-column:1/-1}
.campos.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){.campos.tres{grid-template-columns:repeat(2,minmax(0,1fr))}}
textarea{min-height:90px;resize:vertical;font-family:inherit}
.check{display:flex;align-items:center;gap:10px;font-size:14.5px;cursor:pointer}
dialog.hoja{padding:0;overflow:hidden;max-height:calc(100dvh - 32px)}
dialog.hoja form{display:flex;flex-direction:column;max-height:calc(100dvh - 32px)}
.hoja-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 22px 6px}
.hoja-cab h3{margin:0}
.hoja-cab .cerrar{width:32px;height:32px;min-height:32px;font-size:13px;color:var(--ink2)}
.hoja-cuerpo{padding:10px 22px 4px;overflow:auto}
dialog.hoja .derecha{padding:14px 22px 20px;margin:0;border-top:.5px solid var(--line2);background:var(--panel)}
@media (max-width:600px){
  dialog.hoja{max-width:none!important;width:100%;margin:auto 0 0;border-radius:22px 22px 0 0;max-height:92dvh}
  dialog.hoja form{max-height:92dvh}
  dialog.hoja[open]{animation:subirHoja .28s cubic-bezier(.2,.8,.2,1)}
}
@keyframes subirHoja{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
button.peligro-lleno{background:var(--bad);color:#fff;font-weight:600}
#toasts{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:rgba(29,29,31,.92);color:#fff;padding:11px 18px;border-radius:14px;font-size:14px;font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,.2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:aparecer .25s cubic-bezier(.2,.8,.2,1);transition:opacity .4s, transform .4s;max-width:90vw}
.toast.bad{background:rgba(215,0,21,.94)}
.toast.sale{opacity:0;transform:translateY(8px)}
.buscador{position:relative;flex:1;min-width:180px}
.buscador input{padding-left:36px}
.buscador svg{position:absolute;left:12px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--ink3);pointer-events:none}
.filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filtros select{width:auto;min-width:140px;flex:0 1 auto}
.barra-acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
/* listas estilo iOS */
.lista{border-radius:16px;background:var(--panel);box-shadow:var(--sombra);overflow:hidden}
.card .lista{box-shadow:none;background:transparent;border-radius:0}
.fila-l{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:13px 16px;border-bottom:.5px solid var(--line2);cursor:pointer;transition:background .15s;text-decoration:none;color:inherit}
.card .fila-l{padding:12px 0}
.fila-l:last-child{border-bottom:none}
.fila-l:hover{background:var(--fill2)}
.card .fila-l:hover{background:transparent}
.fila-l .t{font-weight:600;letter-spacing:-.015em;line-height:1.3}
.fila-l .s{font-size:13px;color:var(--ink2);line-height:1.4;margin-top:2px}
.fila-l .d{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.fila-l .d .s{margin-top:3px}
.fila-l .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--fill2);font-weight:700;font-size:13px;color:var(--ink2)}
.flecha{color:var(--ink3);font-size:20px;line-height:1}
.grid-tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.dos-col{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:980px){.dos-col{grid-template-columns:1fr}}
.dato-grande{font:700 34px/1.05 var(--font-display);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.dato-grande small{font-size:17px;color:var(--ink2);font-weight:600;margin-left:4px}
.etiqueta-sec{font-size:12.5px;font-weight:600;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em;margin:22px 0 10px}
.alerta{display:block;padding:11px 14px;line-height:1.45;border-radius:14px;background:var(--warn-bg);color:var(--ink);font-size:14px;margin:8px 0}
.alerta.bad{background:var(--bad-bg)} .alerta.info{background:var(--info-bg)} .alerta.ok{background:var(--ok-bg)}
.alerta b{font-weight:600}
.estimado{font-size:11.5px;font-weight:600;color:var(--warn);background:var(--warn-bg);padding:2px 7px;border-radius:6px;letter-spacing:.02em}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px}
.kv dt{color:var(--ink2)} .kv dd{margin:0;text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.progreso{height:6px;border-radius:3px;background:var(--fill);overflow:hidden}
.progreso i{display:block;height:100%;background:var(--accent);border-radius:3px}
.mini-tabla td,.mini-tabla th{padding:8px 6px;font-size:13.5px}
.pastilla-color{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 5px;border-radius:980px;background:var(--fill2);font-size:13px;font-weight:500}
.pastilla-color .sw{width:18px;height:18px;margin:0}
[data-rol="colaborador"] .solo-admin,[data-rol="socio"] .solo-admin{display:none!important}
@media print{header,.titulo-grande,.no-imprimir,#toasts{display:none!important} body{background:#fff}}