/* ==========================================================================
   MAD.CEO · Control
   componentes.css — Botones, etiquetas, tablas, formularios, modales…
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.56rem 0.95rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--superficie-2);
  color: var(--texto);
  font-size: var(--t-sm);
  font-weight: 550;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background var(--v-rapida) var(--ease-suave),
              border-color var(--v-rapida) var(--ease-suave),
              color var(--v-rapida) var(--ease-suave),
              transform var(--v-rapida) var(--ease-suave),
              box-shadow var(--v-media) var(--ease-suave);
}
.boton:active { transform: translateY(1px) scale(0.985); }
.boton:disabled,
.boton.es-inactivo { opacity: 0.45; pointer-events: none; }
.boton .ico { flex: none; }

.boton--primario {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--sobre-marca);
  box-shadow: var(--sombra-marca);
}
.boton--primario:hover { background: var(--marca-hover); border-color: var(--marca-hover); color: var(--sobre-marca); }

.boton--sutil {
  background: var(--marca-tenue);
  border-color: transparent;
  color: var(--marca-texto);
}
.boton--sutil:hover { background: var(--marca-tenue-2); color: var(--marca-texto); }

/* Acceso al portal y acciones de interfaz: el cian de mad.ceo */
.boton--cian {
  background: transparent;
  border-color: color-mix(in srgb, var(--enlace) 45%, transparent);
  color: var(--enlace);
  font-family: var(--fuente-mono);
  font-weight: 500;
}
.boton--cian:hover { background: var(--enlace); border-color: var(--enlace); color: var(--texto-inv); }

.boton--contorno {
  background: transparent;
  border-color: var(--borde-fuerte);
  color: var(--texto);
}
.boton--contorno:hover { background: var(--superficie-2); border-color: var(--borde-marca); }

.boton--fantasma {
  background: transparent;
  border-color: transparent;
  color: var(--texto-2);
}
.boton--fantasma:hover { background: var(--superficie-2); color: var(--texto); }

.boton--peligro {
  background: var(--tono-rosa-s);
  border-color: var(--tono-rosa-s);
  color: #160b0d;
}
.boton--peligro:hover { filter: brightness(1.08); color: #160b0d; }

.boton--exito {
  background: var(--tono-verde-s);
  border-color: var(--tono-verde-s);
  color: #0b1510;
}
.boton--exito:hover { filter: brightness(1.08); color: #0b1510; }

.boton--pequeno { padding: 0.36rem 0.65rem; font-size: var(--t-xs); }
.boton--bloque { width: 100%; }

/* Llama la atención sobre un botón que quedó pendiente de pulsar. */
.boton--pulso { animation: latido-boton 1.6s var(--ease-suave) infinite; }
@keyframes latido-boton {
  0%, 100% { box-shadow: var(--sombra-marca); }
  50%      { box-shadow: var(--sombra-marca), 0 0 0 5px var(--marca-tenue); }
}
@media (prefers-reduced-motion: reduce) {
  .boton--pulso { animation: none; box-shadow: var(--sombra-marca), 0 0 0 4px var(--marca-tenue); }
}

.boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--texto-2);
  cursor: pointer;
  transition: background var(--v-rapida) var(--ease-suave),
              color var(--v-rapida) var(--ease-suave),
              transform var(--v-rapida) var(--ease-suave);
}
.boton-icono:hover { background: var(--superficie-2); color: var(--texto); }
.boton-icono:active { transform: scale(0.92); }
.boton-icono--peligro:hover { background: var(--tono-rosa-f); color: var(--tono-rosa-t); }
.boton-icono--exito:hover { background: var(--tono-verde-f); color: var(--tono-verde-t); }

.formulario-en-linea { display: inline-flex; }

.acciones-fila {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Etiquetas de color
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.16rem 0.5rem;
  border-radius: var(--r-badge);
  font-size: var(--t-xs);
  font-weight: 550;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--tono-gris-f);
  color: var(--tono-gris-t);
}
.badge__ico { opacity: 0.75; }

.badge--azul     { background: var(--tono-azul-f);     color: var(--tono-azul-t); }
.badge--indigo   { background: var(--tono-indigo-f);   color: var(--tono-indigo-t); }
.badge--cielo    { background: var(--tono-cielo-f);    color: var(--tono-cielo-t); }
.badge--turquesa { background: var(--tono-turquesa-f); color: var(--tono-turquesa-t); }
.badge--verde    { background: var(--tono-verde-f);    color: var(--tono-verde-t); }
.badge--lima     { background: var(--tono-lima-f);     color: var(--tono-lima-t); }
.badge--ambar    { background: var(--tono-ambar-f);    color: var(--tono-ambar-t); }
.badge--naranja  { background: var(--tono-naranja-f);  color: var(--tono-naranja-t); }
.badge--violeta  { background: var(--tono-violeta-f);  color: var(--tono-violeta-t); }
.badge--rosa     { background: var(--tono-rosa-f);     color: var(--tono-rosa-t); }
.badge--gris     { background: var(--tono-gris-f);     color: var(--tono-gris-t); }

/* Etiqueta con color libre: los tonos vienen calculados desde PHP. */
.badge--personalizada { background: var(--et-fondo); color: var(--et-texto); }
:root[data-tema='claro'] .badge--personalizada {
  background: var(--et-fondo-claro);
  color: var(--et-texto-claro);
}

.tilde {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: var(--r-pill);
}
.tilde--si { background: var(--tono-verde-f); color: var(--tono-verde-t); }
.tilde--no { background: var(--tono-gris-f);  color: var(--texto-3); }

/* --------------------------------------------------------------------------
   Avatares
   -------------------------------------------------------------------------- */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: var(--r-pill);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--tono-verde-t);
  background: color-mix(in srgb, var(--tono-verde-s) 22%, var(--superficie-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono-verde-s) 50%, transparent);
  user-select: none;
}
.avatar--xs { width: 26px; height: 26px; font-size: 0.625rem; }
.avatar--sm { width: 32px; height: 32px; font-size: 0.7rem; }
.avatar--md { width: 40px; height: 40px; font-size: 0.8rem; }
.avatar--lg { width: 56px; height: 56px; font-size: 1.05rem; }
.avatar--xl { width: 84px; height: 84px; font-size: 1.6rem; }

/* Monogramas teñidos: fondo tenue, letra y filo del mismo tono. */
.avatar--azul     { background: color-mix(in srgb, var(--tono-azul-s) 22%, var(--superficie-2)); color: var(--tono-azul-t); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono-azul-s) 50%, transparent); }
.avatar--indigo   { background: color-mix(in srgb, var(--tono-indigo-s) 22%, var(--superficie-2)); color: var(--tono-indigo-t); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono-indigo-s) 50%, transparent); }
.avatar--cielo    { background: color-mix(in srgb, var(--tono-cielo-s) 22%, var(--superficie-2)); color: var(--tono-cielo-t); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono-cielo-s) 50%, transparent); }
.avatar--turquesa { background: color-mix(in srgb, var(--tono-turquesa-s) 22%, var(--superficie-2)); color: var(--tono-turquesa-t); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono-turquesa-s) 50%, transparent); }
.avatar--verde    { background: color-mix(in srgb, var(--tono-verde-s) 22%, var(--superficie-2)); color: var(--tono-verde-t); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono-verde-s) 50%, transparent); }
.avatar--lima     { background: color-mix(in srgb, var(--tono-lima-s) 22%, var(--superficie-2)); color: var(--tono-lima-t); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono-lima-s) 50%, transparent); }
.avatar--ambar    { background: color-mix(in srgb, var(--tono-ambar-s) 22%, var(--superficie-2)); color: var(--tono-ambar-t); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono-ambar-s) 50%, transparent); }
.avatar--naranja  { background: color-mix(in srgb, var(--tono-naranja-s) 22%, var(--superficie-2)); color: var(--tono-naranja-t); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono-naranja-s) 50%, transparent); }
.avatar--violeta  { background: color-mix(in srgb, var(--tono-violeta-s) 22%, var(--superficie-2)); color: var(--tono-violeta-t); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono-violeta-s) 50%, transparent); }
.avatar--rosa     { background: color-mix(in srgb, var(--tono-rosa-s) 22%, var(--superficie-2)); color: var(--tono-rosa-t); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono-rosa-s) 50%, transparent); }
.avatar--vacio    { background: var(--superficie-3); color: var(--texto-3); }

/* Cuando hay foto, la imagen llena el círculo y el color queda de borde. */
.avatar--foto { background: var(--superficie-3); overflow: hidden; }
.avatar--foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* --------------------------------------------------------------------------
   Selector de foto de perfil
   -------------------------------------------------------------------------- */

.foto-perfil {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  flex-wrap: wrap;
}

.foto-perfil__marco {
  position: relative;
  flex: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform var(--v-media) var(--ease);
}
.foto-perfil__marco:hover { transform: scale(1.03); }
.foto-perfil__marco:focus-within {
  outline: 2px solid var(--enfoque);
  outline-offset: 3px;
}

.foto-perfil__capa {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 2px;
  border-radius: var(--r-pill);
  background: rgba(8, 12, 10, 0.64);
  color: var(--ceniza);
  opacity: 0;
  transition: opacity var(--v-media) var(--ease-suave);
  pointer-events: none;
  font-size: var(--t-xs);
  font-weight: 600;
}
.foto-perfil__marco:hover .foto-perfil__capa,
.foto-perfil__marco:focus-within .foto-perfil__capa { opacity: 1; }

.foto-perfil__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border-radius: var(--r-pill);
}

.foto-perfil__texto { flex: 1; min-width: 210px; }
.foto-perfil__acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-top: var(--e-3); }

.persona {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.persona__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.persona__txt strong { font-weight: 500; font-size: var(--t-sm); }
.persona__txt small { color: var(--texto-3); font-size: var(--t-xs); }

.grupo-avatares { display: inline-flex; }
.grupo-avatares .avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--superficie); }
.grupo-avatares .avatar:first-child { margin-left: 0; }

/* --------------------------------------------------------------------------
   Paneles / tarjetas
   -------------------------------------------------------------------------- */

.panel {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-sm);
  overflow: hidden;
  animation: escalar-entrada var(--v-lenta) var(--ease) backwards;
}

.panel__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-5) var(--e-5) var(--e-4);
  flex-wrap: wrap;
}
.panel__titulo { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.01em; }
.panel__desc { font-size: var(--t-sm); color: var(--texto-3); margin-top: 0.15rem; }
.panel__acciones { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.panel__cuerpo { padding: 0 var(--e-5) var(--e-5); }
.panel__cuerpo--pegado { padding: 0; }
.panel--plano { box-shadow: none; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  padding: var(--e-4);
}

/* --------------------------------------------------------------------------
   KPI
   -------------------------------------------------------------------------- */

.kpi {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-xl);
  padding: var(--e-5);
  overflow: hidden;
  transition: border-color var(--v-media) var(--ease-suave),
              transform var(--v-media) var(--ease),
              box-shadow var(--v-media) var(--ease);
  animation: escalar-entrada var(--v-lenta) var(--ease) backwards;
}
.kpi::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--tono-azul-s);
  opacity: 0.85;
}
.kpi--verde::after    { background: var(--tono-verde-s); }
.kpi--rosa::after     { background: var(--tono-rosa-s); }
.kpi--ambar::after    { background: var(--tono-ambar-s); }
.kpi--violeta::after  { background: var(--tono-violeta-s); }
.kpi--turquesa::after { background: var(--tono-turquesa-s); }
.kpi--indigo::after   { background: var(--tono-indigo-s); }
.kpi--gris::after     { background: var(--tono-gris-s); }

.kpi__envoltorio { display: block; color: inherit; }
.kpi__envoltorio:hover .kpi {
  border-color: var(--borde-marca);
  transform: translateY(-2px);
  box-shadow: var(--sombra-md);
}

.kpi__cabecera { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.65rem; }
.kpi__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  background: var(--tono-azul-f);
  color: var(--tono-azul-t);
  flex: none;
}
.kpi--verde .kpi__icono    { background: var(--tono-verde-f);    color: var(--tono-verde-t); }
.kpi--rosa .kpi__icono     { background: var(--tono-rosa-f);     color: var(--tono-rosa-t); }
.kpi--ambar .kpi__icono    { background: var(--tono-ambar-f);    color: var(--tono-ambar-t); }
.kpi--violeta .kpi__icono  { background: var(--tono-violeta-f);  color: var(--tono-violeta-t); }
.kpi--turquesa .kpi__icono { background: var(--tono-turquesa-f); color: var(--tono-turquesa-t); }
.kpi--indigo .kpi__icono   { background: var(--tono-indigo-f);   color: var(--tono-indigo-t); }
.kpi--gris .kpi__icono     { background: var(--tono-gris-f);     color: var(--tono-gris-t); }

.kpi__titulo {
  font-family: var(--fuente-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-3);
}
.kpi__valor {
  color: var(--texto);
  font-family: var(--fuente-display);
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kpi__detalle { font-size: var(--t-sm); color: var(--texto-3); margin-top: 0.3rem; }
.kpi__variacion {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.45rem;
  font-size: var(--t-xs);
  font-weight: 500;
}
.kpi__variacion--sube { color: var(--tono-verde-t); }
.kpi__variacion--baja { color: var(--tono-rosa-t); }
.kpi .progreso { margin-top: 0.75rem; }

/* --------------------------------------------------------------------------
   Progreso
   -------------------------------------------------------------------------- */

.progreso {
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--superficie-3);
  overflow: hidden;
}
.progreso__barra {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--tono-azul-s);
  transition: width var(--v-lenta) var(--ease);
}
.progreso--verde    { background: var(--tono-verde-s); }
.progreso--ambar    { background: var(--tono-ambar-s); }
.progreso--rosa     { background: var(--tono-rosa-s); }
.progreso--violeta  { background: var(--tono-violeta-s); }
.progreso--turquesa { background: var(--tono-turquesa-s); }
.progreso--indigo   { background: var(--tono-indigo-s); }
.progreso--naranja  { background: var(--tono-naranja-s); }
.progreso--gris     { background: var(--tono-gris-s); }

/* --------------------------------------------------------------------------
   Tablas
   -------------------------------------------------------------------------- */

.tabla-envoltorio {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  background: var(--superficie);
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.tabla thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--superficie-2);
  padding: 0.65rem 0.85rem;
  text-align: left;
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: var(--texto-3);
  white-space: nowrap;
  border-bottom: 1px solid var(--borde);
}
.tabla tbody td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background var(--v-rapida) var(--ease-suave); }
.tabla tbody tr:hover { background: var(--superficie-2); }
.tabla tfoot td {
  padding: 0.7rem 0.85rem;
  border-top: 1px solid var(--borde-fuerte);
  background: var(--superficie-2);
  font-weight: 600;
}
.tabla .col-acciones { width: 1%; white-space: nowrap; }
.tabla .num { font-size: var(--t-sm); }

.monto-positivo { color: var(--tono-verde-t); font-weight: 500; }
.monto-negativo { color: var(--tono-rosa-t); font-weight: 500; }

/* Tabla en tarjetas para pantallas chicas */
@media (max-width: 760px) {
  .tabla-envoltorio { border: 0; background: transparent; overflow: visible; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla thead, .tabla tfoot { display: none; }
  .tabla tbody tr {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    margin-bottom: var(--e-3);
    padding: 0.35rem 0.25rem;
  }
  .tabla tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    border-bottom: 1px dashed var(--borde);
    padding: 0.5rem 0.75rem;
    text-align: right;
  }
  .tabla tbody td::before {
    content: attr(data-etiqueta);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--texto-3);
    text-align: left;
    flex: none;
  }
  .tabla tbody td.col-acciones { width: auto; justify-content: flex-end; border-bottom: 0; }
  .tabla tbody td.col-acciones::before { content: none; }
  .tabla tbody td.col-acciones .acciones-fila { flex-wrap: wrap; gap: var(--e-1); }
  .tabla .ta-der { text-align: right; }
}

/* --------------------------------------------------------------------------
   Estado vacío
   -------------------------------------------------------------------------- */

.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: var(--e-10) var(--e-5);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--marca-tenue) 0%, transparent 60%),
    var(--superficie-2);
}
.vacio__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--r-pill);
  background: var(--superficie);
  border: 1px solid var(--borde);
  color: var(--texto-3);
  margin-bottom: var(--e-2);
}
.vacio__titulo { font-weight: 600; font-size: var(--t-md); }
.vacio__texto { font-size: var(--t-sm); color: var(--texto-3); max-width: 46ch; }
.vacio__accion { margin-top: var(--e-3); }

/* --------------------------------------------------------------------------
   Avisos
   -------------------------------------------------------------------------- */

.avisos {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-bottom: var(--e-5);
}
.aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--r-md);
  border: 1px solid var(--borde);
  background: var(--superficie);
  font-size: var(--t-sm);
  animation: aparecer var(--v-media) var(--ease) backwards;
}
.aviso p { flex: 1; min-width: 0; }
.aviso__ico { flex: none; margin-top: 2px; }
.aviso__cerrar { width: 26px; height: 26px; flex: none; }
.aviso--ok    { background: var(--tono-verde-f);  border-color: transparent; color: var(--tono-verde-t); }
.aviso--error { background: var(--tono-rosa-f);   border-color: transparent; color: var(--tono-rosa-t); }
.aviso--aviso { background: var(--tono-ambar-f);  border-color: transparent; color: var(--tono-ambar-t); }
.aviso--info  { background: var(--tono-azul-f);   border-color: transparent; color: var(--tono-azul-t); }

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */

.formulario {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-4);
}

.campo { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.campo--completo { grid-column: 1 / -1; }
.campo--mitad { grid-column: span 1; }
.campo--tercio { grid-column: span 1; }

.campo__etiqueta {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-2);
}
.campo__req { color: var(--tono-rosa-t); }

.campo__control {
  width: 100%;
  padding: 0.58rem 0.75rem;
  background: var(--fondo-2);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-md);
  color: var(--texto);
  font-size: var(--t-sm);
  transition: border-color var(--v-rapida) var(--ease-suave),
              box-shadow var(--v-rapida) var(--ease-suave),
              background var(--v-rapida) var(--ease-suave);
}
.campo__control::placeholder { color: var(--texto-3); opacity: 1; }
.campo__control:hover { border-color: var(--borde-marca); }
.campo__control:focus {
  outline: none;
  border-color: var(--enfoque);
  box-shadow: 0 0 0 3px var(--enfoque-tenue);
  background: var(--superficie);
}
.campo__control:read-only { opacity: 0.7; cursor: not-allowed; }
textarea.campo__control { resize: vertical; min-height: 78px; line-height: 1.5; }

.campo__envoltorio-select { position: relative; display: flex; }
.campo__control--select {
  appearance: none;
  padding-right: 2.1rem;
  cursor: pointer;
}
.campo__flecha {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--texto-3);
}

.campo__prefijado { position: relative; display: flex; }
.campo__prefijo {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-3);
  font-family: var(--fuente-mono);
  font-size: var(--t-sm);
  pointer-events: none;
}
.campo__control--dinero {
  padding-left: 1.65rem;
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
}

.campo__ayuda { font-size: var(--t-xs); color: var(--texto-3); line-height: 1.45; }

/* --- Rueda de color --------------------------------------------------- */

.campo__color {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 2.5rem;
  padding: 0.3rem 0.4rem 0.3rem 0.3rem;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie-2);
}
.campo__color-rueda {
  position: relative;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
}
.campo__color-rueda input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.campo__color-muestra {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: var(--color-elegido, var(--marca));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform var(--v-rapida) var(--ease-suave);
}
.campo__color:not(.tiene-color) .campo__color-muestra {
  background:
    linear-gradient(135deg, transparent 46%, var(--texto-3) 46%, var(--texto-3) 54%, transparent 54%),
    var(--color-elegido, var(--marca));
  opacity: 0.55;
}
.campo__color-rueda:hover .campo__color-muestra { transform: scale(1.06); }
.campo__color-texto {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--t-xs);
  color: var(--texto-3);
  font-family: var(--fuente-mono);
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.campo__color.tiene-color .campo__color-texto { color: var(--texto-2); }
.campo__color-quitar { flex: none; }
.campo__color:not(.tiene-color) .campo__color-quitar { visibility: hidden; }

.formulario__separador {
  grid-column: 1 / -1;
  margin-top: var(--e-2);
  padding-top: var(--e-3);
  border-top: 1px solid var(--borde);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texto-3);
}

@media (max-width: 620px) {
  .formulario { grid-template-columns: minmax(0, 1fr); }
}

/* Interruptor (checkbox) */
.campo--check { justify-content: center; }
.interruptor {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
}
.interruptor input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.interruptor__pista {
  position: relative;
  width: 42px; height: 24px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--superficie-3);
  border: 1px solid var(--borde-fuerte);
  transition: background var(--v-media) var(--ease-suave), border-color var(--v-media) var(--ease-suave);
}
.interruptor__bola {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: var(--r-pill);
  background: var(--texto-3);
  transition: transform var(--v-media) var(--ease-rebote), background var(--v-media) var(--ease-suave);
}
.interruptor input:checked + .interruptor__pista { background: var(--marca); border-color: var(--marca); }
.interruptor input:checked + .interruptor__pista .interruptor__bola { transform: translateX(18px); background: var(--sobre-marca); }
.interruptor input:focus-visible + .interruptor__pista { outline: 2px solid var(--enfoque); outline-offset: 2px; }
.interruptor__texto { font-size: var(--t-sm); }

/* Zona de subida de archivos */
.zona-subida {
  position: relative;
  border: 1.5px dashed var(--borde-fuerte);
  border-radius: var(--r-lg);
  background: var(--fondo-2);
  padding: var(--e-5);
  text-align: center;
  transition: border-color var(--v-media) var(--ease-suave), background var(--v-media) var(--ease-suave);
}
.zona-subida.es-activa {
  border-color: var(--marca);
  background: var(--marca-tenue);
}
.zona-subida__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%; height: 100%;
}
.zona-subida__cuerpo { pointer-events: none; display: grid; justify-items: center; gap: 0.3rem; }
.zona-subida__ico { color: var(--enlace); }
.zona-subida__titulo { font-size: var(--t-sm); font-weight: 500; }
.zona-subida__titulo span { color: var(--enlace); text-decoration: underline; text-underline-offset: 2px; }
.zona-subida__nota { font-size: var(--t-xs); color: var(--texto-3); }

.zona-subida__lista {
  list-style: none;
  padding: 0;
  margin: var(--e-3) 0 0;
  display: grid;
  gap: 0.4rem;
  position: relative;
  z-index: 2;
}
.zona-subida__lista:empty { margin: 0; }
.zona-subida__archivo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--r-sm);
  background: var(--superficie);
  border: 1px solid var(--borde);
  font-size: var(--t-xs);
  text-align: left;
}
.zona-subida__miniatura {
  width: 34px; height: 34px;
  border-radius: var(--r-xs);
  object-fit: cover;
  flex: none;
  background: var(--superficie-3);
}
.zona-subida__nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zona-subida__peso { color: var(--texto-3); flex: none; font-family: var(--fuente-mono); }

/* Galería de comprobantes ya subidos */
.comprobantes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.comprobante {
  position: relative;
  display: block;
  width: 72px; height: 72px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--borde);
  background: var(--superficie-3);
  transition: transform var(--v-media) var(--ease), border-color var(--v-media) var(--ease-suave);
}
.comprobante:hover { transform: scale(1.06); border-color: var(--enlace); z-index: 2; }
.comprobante img { width: 100%; height: 100%; object-fit: cover; }
.comprobante--pdf {
  display: grid;
  place-items: center;
  color: var(--texto-2);
  font-size: var(--t-xs);
  gap: 2px;
}

/* --------------------------------------------------------------------------
   Modales
   -------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--e-4);
}
.modal.es-abierto { display: flex; }

.modal__fondo {
  position: absolute;
  inset: 0;
  background: rgba(6, 9, 8, 0.7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: aparecer-suave var(--v-media) var(--ease-suave);
}
@supports not (backdrop-filter: blur(4px)) {
  .modal__fondo { background: rgba(6, 9, 8, 0.88); }
}

.modal__caja {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-2xl);
  box-shadow: var(--sombra-lg);
  overflow: hidden;
  animation: escalar-entrada var(--v-media) var(--ease);
}
.modal--ancho .modal__caja { width: min(920px, 100%); }

.modal__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-5) var(--e-5) var(--e-3);
  border-bottom: 1px solid var(--borde);
}
.modal__titulo { font-family: var(--fuente-display); font-size: var(--t-lg); font-weight: 600; }
.modal__formulario { display: flex; flex-direction: column; min-height: 0; }
.modal__cuerpo {
  padding: var(--e-5);
  overflow-y: auto;
  /* Evita que el scroll del modal arrastre la página de fondo. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.modal__pie {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-5);
  border-top: 1px solid var(--borde);
  background: var(--superficie-2);
}

/* Confirmación */
.confirmacion {
  position: fixed;
  inset: 0;
  z-index: var(--z-confirmar);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--e-4);
}
.confirmacion.es-abierto { display: flex; }
.confirmacion__caja {
  position: relative;
  width: min(420px, 100%);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-lg);
  padding: var(--e-6);
  text-align: center;
  animation: escalar-entrada var(--v-media) var(--ease);
}
.confirmacion__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--r-pill);
  background: var(--tono-rosa-f);
  color: var(--tono-rosa-t);
  margin-bottom: var(--e-3);
}
.confirmacion__titulo { font-size: var(--t-md); margin-bottom: 0.35rem; }
.confirmacion__texto { font-size: var(--t-sm); color: var(--texto-2); }
.confirmacion__botones {
  display: flex;
  gap: var(--e-2);
  justify-content: center;
  margin-top: var(--e-5);
}

/* --------------------------------------------------------------------------
   Pestañas
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: 0.2rem;
  padding: 0.28rem;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: var(--e-5);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__item {
  position: relative;
  padding: 0.44rem 0.85rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--texto-2);
  white-space: nowrap;
  transition: background var(--v-rapida) var(--ease-suave), color var(--v-rapida) var(--ease-suave);
}
.tabs__item:hover { background: var(--superficie-3); color: var(--texto); }
.tabs__item.es-activa {
  background: var(--marca);
  color: var(--sobre-marca);
  box-shadow: var(--sombra-sm);
}

/* --------------------------------------------------------------------------
   Filtros
   -------------------------------------------------------------------------- */

.filtros {
  display: flex;
  align-items: flex-end;
  gap: var(--e-3);
  flex-wrap: wrap;
  padding: var(--e-4);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  margin-bottom: var(--e-4);
}
.filtros__campo { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.filtros__campo > span {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-3);
}
.filtros__campo input,
.filtros__campo select {
  padding: 0.42rem 0.65rem;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  color: var(--texto);
  min-width: 150px;
}
.filtros__select { position: relative; display: flex; }
.filtros__select select { appearance: none; padding-right: 1.9rem; cursor: pointer; width: 100%; }
.filtros__flecha { position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--texto-3); }

/* --- Filtro desplegable con casillas (varias opciones a la vez) ----------- */

.filtro-multi { position: relative; }

.filtro-multi__boton {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.65rem;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  list-style: none;
  transition: border-color var(--v-rapida) var(--ease-suave),
              background var(--v-rapida) var(--ease-suave);
}
.filtro-multi__boton::-webkit-details-marker { display: none; }
.filtro-multi__boton:hover { border-color: var(--borde-marca); }
.filtro-multi[open] .filtro-multi__boton {
  border-color: var(--enfoque);
  box-shadow: 0 0 0 3px var(--enfoque-tenue);
}
.filtro-multi.tiene-marcados .filtro-multi__boton {
  border-color: var(--borde-marca);
  background: var(--marca-tenue);
}

.filtro-multi__etiqueta {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-3);
}
.filtro-multi__valor { color: var(--texto); }
.filtro-multi.tiene-marcados .filtro-multi__valor { color: var(--marca-texto); font-weight: 500; }
.filtro-multi__flecha { color: var(--texto-3); transition: transform var(--v-rapida) var(--ease-suave); }
.filtro-multi[open] .filtro-multi__flecha { transform: rotate(180deg); }

.filtro-multi__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-width: 320px;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-lg);
  padding: 0.5rem;
  animation: escalar-entrada var(--v-rapida) var(--ease);
}

.filtro-multi__acciones {
  display: flex;
  gap: 0.35rem;
  padding: 0 0.15rem 0.45rem;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 0.35rem;
}
.filtro-multi__accion {
  background: none;
  border: 0;
  padding: 0.2rem 0.4rem;
  border-radius: var(--r-xs);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--enlace);
  cursor: pointer;
}
.filtro-multi__accion:hover { background: var(--enfoque-tenue); }

.filtro-multi__buscador { display: block; margin-bottom: 0.35rem; }
.filtro-multi__buscador input {
  width: 100%;
  padding: 0.35rem 0.55rem;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  color: var(--texto);
}

.filtro-multi__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.filtro-multi__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.32rem 0.4rem;
  border-radius: var(--r-sm);
  transition: background var(--v-rapida) var(--ease-suave);
}
.filtro-multi__item:hover { background: var(--superficie-2); }
.filtro-multi__item.es-oculto { display: none; }
.filtro-multi__item input {
  width: 16px;
  height: 16px;
  accent-color: var(--marca);
  flex: none;
  cursor: pointer;
}
.filtro-multi__item label {
  flex: 1;
  min-width: 0;
  font-size: var(--t-sm);
  cursor: pointer;
  line-height: 1.35;
}

@media (max-width: 620px) {
  .filtro-multi { width: 100%; }
  .filtro-multi__boton { width: 100%; justify-content: space-between; }
  .filtro-multi__panel { left: 0; right: 0; max-width: none; }
}

.filtros__buscar {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 220px;
}
.filtros__buscar input {
  width: 100%;
  padding: 0.48rem 0.7rem 0.48rem 2.1rem;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  color: var(--texto);
}
.filtros__ico { position: absolute; left: 0.68rem; color: var(--texto-3); pointer-events: none; }
.filtros input:focus,
.filtros select:focus {
  outline: none;
  border-color: var(--enfoque);
  box-shadow: 0 0 0 3px var(--enfoque-tenue);
}

/* --------------------------------------------------------------------------
   Paginación
   -------------------------------------------------------------------------- */

.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  margin-top: var(--e-4);
}
.paginacion__boton {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  color: var(--texto-2);
  transition: background var(--v-rapida) var(--ease-suave), border-color var(--v-rapida) var(--ease-suave);
}
.paginacion__boton:hover { background: var(--superficie-2); color: var(--texto); border-color: var(--borde-marca); }
.paginacion__boton.es-inactivo { opacity: 0.4; pointer-events: none; }
.paginacion__estado { font-size: var(--t-sm); color: var(--texto-3); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Enlaces con icono
   -------------------------------------------------------------------------- */

.enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: inherit;
}
.enlace:hover { text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   Pantalla de mensaje (403, errores)
   -------------------------------------------------------------------------- */

.pantalla-mensaje {
  max-width: 560px;
  margin: var(--e-16) auto;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--e-3);
}
.pantalla-mensaje__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: var(--r-pill);
  background: var(--tono-ambar-f);
  color: var(--tono-ambar-t);
}
.pantalla-mensaje p { color: var(--texto-2); font-size: var(--t-sm); }
.pantalla-mensaje__acciones { margin-top: var(--e-3); }
.ico { flex-shrink: 0; }
.badge { white-space: nowrap; }
.persona--corta { white-space: nowrap; gap: 0.4rem; }