/* ======================= */
/*  Inputs universales UI  */
/* ======================= */

/* Vars derivadas del tema actual */
:root{
  --field-bg: color-mix(in oklab, var(--panel) 86%, transparent);
  --field-border: color-mix(in oklab, var(--line) 94%, transparent);
  --field-hover: color-mix(in oklab, var(--panel) 92%, transparent);
  --field-focus: var(--accent);
  --field-text: var(--text);
  --field-muted: var(--muted);
  --field-ring: color-mix(in oklab, var(--accent) 22%, transparent);
  --field-shadow: 0 1px 0 rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.04);
  --field-radius: 12px;
  --field-pad: 10px 12px;
}

html[data-theme="dark"]{
  --field-bg: color-mix(in oklab, var(--panel) 80%, transparent);
  --field-border: color-mix(in oklab, var(--line) 80%, transparent);
  --field-hover: color-mix(in oklab, var(--panel) 88%, transparent);
  --field-ring: color-mix(in oklab, var(--accent) 28%, transparent);
}

/* Contenedor de campo (label + ayuda) */
.field{
  display:grid; gap:6px;
}
.field > label{
  font-weight:600; font-size:14px; color:var(--field-text);
}
.field .hint{
  font-size:12px; color:var(--field-muted);
}

/* Inputs base */
input[type="text"], input[type="email"], input[type="number"], input[type="url"],
input[type="password"], input[type="search"], input[type="tel"],
input[type="date"], input[type="time"], input[type="datetime-local"],
select, textarea{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:100%; background:var(--field-bg); color:var(--field-text);
  border:1px solid var(--field-border);
  padding:var(--field-pad); border-radius:var(--field-radius);
  box-shadow:var(--field-shadow);
  outline:none; transition:background .15s, border-color .15s, box-shadow .15s;
}
textarea{ min-height:96px; resize:vertical; }

input::placeholder, textarea::placeholder{ color:var(--field-muted); opacity:.9 }

/* Hover/Focus */
input:hover, select:hover, textarea:hover{
  background:var(--field-hover);
}
input:focus, select:focus, textarea:focus{
  border-color: var(--field-focus);
  box-shadow: 0 0 0 3px var(--field-ring);
}

/* Estados: error / ok / disabled */
.is-error, .is-error input, .is-error select, .is-error textarea{
  border-color:#ef4444 !important;
  box-shadow:0 0 0 3px color-mix(in oklab, #ef4444 25%, transparent) !important;
}
.is-ok, .is-ok input, .is-ok select, .is-ok textarea{
  border-color:#22c55e !important;
  box-shadow:0 0 0 3px color-mix(in oklab, #22c55e 25%, transparent) !important;
}
input:disabled, select:disabled, textarea:disabled{
  opacity:.6; pointer-events:none; filter:grayscale(.1);
}

/* Tamaños rápidos */
.input-sm{ --field-pad: 6px 10px; --field-radius:10px; font-size:14px }
.input-lg{ --field-pad: 12px 14px; --field-radius:14px; font-size:18px }

/* Input con icono a la izquierda (usa .has-icon y un span.icon) */
.has-icon{ position:relative }
.has-icon .icon{
  position:absolute; inset:0 auto 0 10px; display:grid; place-items:center;
  color:var(--field-muted); pointer-events:none; font-size:14px;
}
.has-icon input{ padding-left:36px }

/* Select: flecha custom */
select{
  background-image: linear-gradient(45deg, transparent 50%, var(--field-muted) 50%),
                    linear-gradient(135deg, var(--field-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:38px;
}

/* Number: oculta spinners (Chrome/Firefox) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
input[type="number"]{ -moz-appearance: textfield }

/* Checkbox y radio */
input[type="checkbox"], input[type="radio"]{
  appearance:none; width:18px; height:18px; margin:0;
  border:1px solid var(--field-border); border-radius:6px;
  background:var(--field-bg); display:inline-grid; place-items:center;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
input[type="radio"]{ border-radius:999px }
input[type="checkbox"]:focus, input[type="radio"]:focus{ box-shadow:0 0 0 3px var(--field-ring) }
input[type="checkbox"]:checked{ background:var(--accent); border-color:var(--accent); }
input[type="checkbox"]:checked::after{
  content:"✓"; color:#fff; font-weight:900; font-size:12px; line-height:1;
}
input[type="radio"]:checked{
  border-color:var(--accent); background:radial-gradient(#fff 0 35%, var(--accent) 36% 100%);
}

/* Switch (toggle) — usa <label class="switch"><input type="checkbox"><span></span></label> */
.switch{ position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer }
.switch > input{ display:none }
.switch > span{
  width:44px; height:26px; border-radius:999px; background:var(--field-bg);
  border:1px solid var(--field-border); position:relative; transition:.2s;
  box-shadow:var(--field-shadow);
}
.switch > span::after{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:999px;
  background:color-mix(in oklab, var(--panel) 92%, transparent); transition:.2s;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.switch > input:checked + span{ background:color-mix(in oklab, var(--accent) 25%, transparent); border-color:var(--accent) }
.switch > input:checked + span::after{ transform:translateX(18px); background:#fff }

/* File input “bonito”
   En HTML: <label class="file"><input type="file"><span>Subir archivo</span></label> */
.file{ display:inline-flex; align-items:center; gap:10px; }
.file > input[type="file"]{ display:none }
.file > span{
  border:1px solid var(--field-border); background:var(--field-bg); padding:8px 12px; border-radius:10px;
  cursor:pointer; transition:.15s;
}
.file > span:hover{ background:var(--field-hover) }

/* Grupos en línea */
.inline-fields{ display:flex; gap:10px; flex-wrap:wrap }
.inline-fields > *{ flex:1 1 220px }

/* ===== Modales base (dark/light con tus variables) ===== */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:none; align-items:center; justify-content:center; z-index:200;
}
.modal-backdrop.show{ display:flex; }
.modal{
  width:min(720px, 92vw); background:var(--panel); color:var(--text);
  border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow);
  display:grid; grid-template-rows:auto 1fr auto; max-height:84svh; overflow:hidden;
}
.modal header{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line); }
.modal header h3{ margin:0; font-size:18px }
.modal .modal-body{ padding:12px; overflow:auto }
.modal footer{ display:flex; gap:10px; justify-content:flex-end; padding:12px; border-top:1px solid var(--line) }

.modal .x{ border:none; background:transparent; font-size:20px; cursor:pointer; color:var(--muted) }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.form-grid .full{ grid-column:1 / -1 }

@media (max-width: 720px){
  .form-grid{ grid-template-columns:1fr; }
}