/* Componentes de tvplataforma. Solo usan tokens. Objetivos táctiles de al menos 44 px; sin desplazamiento horizontal desde 360 px. */

/* Botones */
.tv-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tv-espacio-2);
  min-height: var(--tv-tactil-min); min-width: var(--tv-tactil-min); padding: 0 var(--tv-espacio-4);
  border: 1px solid transparent; border-radius: var(--tv-radio); font: inherit; font-weight: 600; cursor: pointer;
  background: var(--tv-boton); color: var(--tv-sobre-boton); text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease; -webkit-tap-highlight-color: transparent;
  /* El cuerpo parte palabras largas (overflow-wrap: anywhere); un botón nunca parte una palabra a la mitad */
  overflow-wrap: normal; word-break: normal; text-align: center;
}
/* Al pasar el cursor el botón se aleja del color de su texto (se oscurece en temas claros, se aclara en oscuros): el contraste sube */
.tv-boton:hover { background: color-mix(in srgb, var(--tv-boton) 86%, var(--tv-texto)); }
.tv-boton:active { background: color-mix(in srgb, var(--tv-boton) 74%, var(--tv-texto)); }
.tv-boton--secundario { background: var(--tv-secundario); color: var(--tv-sobre-secundario); border-color: var(--tv-borde); }
.tv-boton--secundario:hover { background: color-mix(in srgb, var(--tv-secundario) 88%, var(--tv-sobre-secundario)); }
.tv-boton--peligro { background: var(--tv-estado-error-texto); color: var(--tv-estado-error-fondo); }
.tv-boton--peligro:hover { background: color-mix(in srgb, var(--tv-estado-error-texto) 86%, var(--tv-texto)); }
.tv-boton--peligro:active { background: color-mix(in srgb, var(--tv-estado-error-texto) 74%, var(--tv-texto)); }
.tv-boton--secundario:active { background: color-mix(in srgb, var(--tv-secundario) 78%, var(--tv-sobre-secundario)); }
.tv-boton[disabled], .tv-boton[aria-disabled="true"] { opacity: .48; cursor: not-allowed; }
.tv-boton--bloque { display: flex; width: 100%; }

/* Tarjeta */
.tv-tarjeta {
  background: var(--tv-superficie); border: 1px solid var(--tv-separador); border-radius: var(--tv-radio);
  padding: var(--tv-espacio-4); margin-bottom: var(--tv-espacio-4);
}
.tv-tarjeta > h2:first-child, .tv-tarjeta__titulo { font-size: 1.0625rem; margin-bottom: var(--tv-espacio-3); }
.tv-tarjeta--enlace { display: block; color: inherit; text-decoration: none; transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease; }
.tv-tarjeta--enlace:hover { border-color: var(--tv-borde); background: var(--tv-seleccion); color: var(--tv-sobre-seleccion); }
.tv-rejilla { display: grid; gap: var(--tv-espacio-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.tv-rejilla > .tv-tarjeta, .tv-pila > .tv-tarjeta { margin-bottom: 0; }
.tv-rejilla { margin-bottom: var(--tv-espacio-4); }

/* Alertas */
.tv-alerta { border-radius: var(--tv-radio); padding: var(--tv-espacio-3) var(--tv-espacio-4); border: 1px solid transparent; }
.tv-alerta__titulo { font-weight: 700; margin: 0 0 var(--tv-espacio-1); }
.tv-alerta > :last-child { margin-bottom: 0; }
.tv-alerta--info { background: var(--tv-estado-info-fondo); color: var(--tv-estado-info-texto); }
.tv-alerta--exito { background: var(--tv-estado-exito-fondo); color: var(--tv-estado-exito-texto); }
.tv-alerta--aviso { background: var(--tv-estado-aviso-fondo); color: var(--tv-estado-aviso-texto); }
.tv-alerta--error { background: var(--tv-estado-error-fondo); color: var(--tv-estado-error-texto); }

/* Formularios */
.tv-formulario { display: grid; gap: var(--tv-espacio-4); max-width: 640px; }
.tv-formulario--ancho { max-width: none; }
.tv-campo { display: grid; gap: var(--tv-espacio-1); }
.tv-campo > label { font-weight: 600; }
.tv-campo__requerido { color: var(--tv-estado-error-texto); }
.tv-campo__ayuda { color: var(--tv-tenue); font-size: .875rem; }
.tv-campo__error { color: var(--tv-estado-error-texto); font-size: .875rem; font-weight: 600; margin: 0; padding: 0; list-style: none; }
.tv-campo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.tv-campo select, .tv-campo textarea {
  width: 100%; min-height: var(--tv-tactil-min); padding: var(--tv-espacio-2) var(--tv-espacio-3);
  border: 1px solid var(--tv-borde); border-radius: var(--tv-radio); background: var(--tv-superficie); color: var(--tv-texto);
  font: inherit; font-size: 1rem; /* 16 px: iOS no hace zoom al enfocar */
}
.tv-campo input, .tv-campo select, .tv-campo textarea { transition: border-color .12s ease, box-shadow .12s ease; }
.tv-campo input:hover:not(:disabled), .tv-campo select:hover:not(:disabled), .tv-campo textarea:hover:not(:disabled) { border-color: var(--tv-texto); }
.tv-campo input:focus-visible:not([type="checkbox"]):not([type="radio"]), .tv-campo select:focus-visible, .tv-campo textarea:focus-visible { border-color: var(--tv-foco); outline-offset: 0; }
.tv-campo input:disabled:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]), .tv-campo select:disabled, .tv-campo textarea:disabled { background: var(--tv-secundario); color: var(--tv-tenue); cursor: not-allowed; }
.tv-campo input[type="checkbox"], .tv-campo input[type="radio"] { accent-color: var(--tv-boton); }
.tv-campo textarea { min-height: 112px; resize: vertical; }
.tv-campo input[type="file"] {
  width: 100%; min-height: var(--tv-tactil-min); padding: var(--tv-espacio-2) var(--tv-espacio-3); font: inherit; font-size: 1rem;
  border: 1px dashed var(--tv-borde); border-radius: var(--tv-radio); background: var(--tv-superficie); color: var(--tv-texto); cursor: pointer;
}
.tv-campo input[type="file"]::file-selector-button {
  min-height: calc(var(--tv-tactil-min) - 2 * var(--tv-espacio-2)); margin-right: var(--tv-espacio-3); padding: 0 var(--tv-espacio-3);
  border: 1px solid var(--tv-borde); border-radius: var(--tv-radio); background: var(--tv-secundario); color: var(--tv-sobre-secundario);
  font: inherit; font-weight: 600; cursor: pointer;
}
.tv-campo input[type="file"]:hover { border-color: var(--tv-texto); }
.tv-campo--error input, .tv-campo--error select, .tv-campo--error textarea { border-color: var(--tv-estado-error-texto); border-width: 2px; }
.tv-campo--casilla { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--tv-espacio-3); }
.tv-campo--casilla input { width: 24px; height: 24px; margin: 10px 10px 10px 0; }
.tv-campo--casilla > label { font-weight: 500; display: flex; align-items: center; min-height: var(--tv-tactil-min); cursor: pointer; }
.tv-campo--casilla .tv-campo__ayuda { margin-top: calc(-1 * var(--tv-espacio-2)); padding-bottom: var(--tv-espacio-2); }
.tv-campo--casilla .tv-campo__ayuda, .tv-campo--casilla .tv-campo__error { grid-column: 2; }
.tv-formulario__acciones { display: flex; flex-wrap: wrap; gap: var(--tv-espacio-2); }

/* Tabla: se apila bajo 600 px */
.tv-tabla-envoltura { overflow-x: auto; border: 1px solid var(--tv-separador); border-radius: var(--tv-radio); background: var(--tv-superficie); }
.tv-tabla { width: 100%; border-collapse: collapse; }
.tv-tabla th, .tv-tabla td { padding: var(--tv-espacio-3) var(--tv-espacio-4); text-align: left; border-bottom: 1px solid var(--tv-separador); vertical-align: top; }
.tv-tabla thead th { background: var(--tv-secundario); color: var(--tv-sobre-secundario); font-size: .875rem; white-space: nowrap; }
.tv-tabla tbody tr:last-child td { border-bottom: 0; }
.tv-tabla tbody tr:hover { background: var(--tv-seleccion); color: var(--tv-sobre-seleccion); }
.tv-tabla td.tv-num, .tv-tabla th.tv-num { text-align: right; font-variant-numeric: tabular-nums; }
.tv-tabla__vacio { text-align: center; color: var(--tv-tenue); padding: var(--tv-espacio-5); }
@media (max-width: 599px) {
  .tv-tabla td:empty { display: none; }
  .tv-tabla-envoltura { border: 0; background: none; overflow: visible; }
  .tv-tabla, .tv-tabla tbody, .tv-tabla tr, .tv-tabla td { display: block; width: 100%; }
  .tv-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tv-tabla tr { background: var(--tv-superficie); border: 1px solid var(--tv-separador); border-radius: var(--tv-radio); margin-bottom: var(--tv-espacio-3); padding: var(--tv-espacio-2) 0; }
  .tv-tabla td { border: 0; display: grid; grid-template-columns: minmax(96px, 36%) 1fr; gap: var(--tv-espacio-3); padding: var(--tv-espacio-2) var(--tv-espacio-4); }
  .tv-tabla td::before { content: attr(data-etiqueta); color: var(--tv-tenue); font-size: .875rem; font-weight: 600; }
  .tv-tabla td.tv-num { text-align: left; }
  .tv-tabla td.tv-tabla__vacio { display: block; }
  .tv-tabla td.tv-tabla__vacio::before { content: none; }
}

/* Hoja inferior (<dialog>): hoja desde abajo en teléfono, diálogo centrado en pantallas anchas */
.tv-hoja {
  border: 0; padding: 0; background: var(--tv-superficie); color: var(--tv-texto);
  width: 100%; max-width: 100%; margin: auto 0 0; max-height: 90dvh; overflow: auto;
  border-radius: calc(var(--tv-radio) * 2) calc(var(--tv-radio) * 2) 0 0;
}
.tv-hoja::backdrop { background: rgb(0 0 0 / .5); }
.tv-hoja__cuerpo { padding: var(--tv-espacio-4) var(--tv-espacio-4) calc(var(--tv-espacio-4) + env(safe-area-inset-bottom)); }
.tv-hoja__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--tv-espacio-3); margin-bottom: var(--tv-espacio-3); }
.tv-hoja__cabecera h2 { margin: 0; min-width: 0; font-size: 1.125rem; }
.tv-hoja__cabecera .tv-boton { flex: none; white-space: nowrap; }
/* Contenido de una hoja: espacio parejo entre campos, acciones separadas y, en teléfono, en rejilla de dos columnas */
.tv-hoja__cuerpo > .tv-campo, .tv-hoja__cuerpo > .tv-formulario > .tv-campo { margin-bottom: var(--tv-espacio-3); }
.tv-hoja__cuerpo > p { margin-bottom: var(--tv-espacio-3); }
.tv-hoja__cuerpo .tv-formulario { max-width: none; }
.tv-hoja__cuerpo .tv-formulario__acciones { margin-top: var(--tv-espacio-4); }
.tv-hoja__cuerpo > .tv-formulario { gap: var(--tv-espacio-3); }
.tv-hoja__cuerpo > .tv-formulario > .tv-formulario__acciones { margin-top: var(--tv-espacio-2); }
@media (max-width: 599px) {
  .tv-hoja__cuerpo .tv-formulario__acciones, .tv-hoja__acciones { display: grid; grid-template-columns: 1fr 1fr; }
  .tv-hoja__cuerpo .tv-formulario__acciones > .tv-boton, .tv-hoja__acciones > .tv-boton { padding: var(--tv-espacio-1) var(--tv-espacio-2); line-height: 1.2; }
  .tv-hoja__cuerpo .tv-formulario__acciones > :last-child:nth-child(odd), .tv-hoja__acciones > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.tv-hoja__acciones { display: flex; flex-wrap: wrap; gap: var(--tv-espacio-2); margin-top: var(--tv-espacio-4); }
.tv-hoja--confirmar { max-width: 480px; }
.tv-hoja--confirmar .tv-hoja__cuerpo > h2 { margin-bottom: var(--tv-espacio-2); }
.tv-hoja__asa { width: 40px; height: 4px; border-radius: 2px; background: var(--tv-borde); margin: var(--tv-espacio-2) auto 0; }
@media (min-width: 600px) {
  .tv-hoja { max-width: 560px; margin: auto; border-radius: calc(var(--tv-radio) * 2); }
  .tv-hoja__asa { display: none; }
}

/* Barra inferior de acciones (al alcance del pulgar) */
.tv-barra-inferior {
  position: sticky; bottom: 0; z-index: 20; display: flex; gap: var(--tv-espacio-2); justify-content: flex-end;
  margin: var(--tv-espacio-4) calc(-1 * var(--tv-espacio-4)) calc(-1 * var(--tv-espacio-4));
  padding: var(--tv-espacio-3) var(--tv-espacio-4) calc(var(--tv-espacio-3) + env(safe-area-inset-bottom));
  background: var(--tv-cabecera); color: var(--tv-sobre-cabecera); border-top: 1px solid var(--tv-separador);
}
.tv-barra-inferior > * { flex: 1 1 0; }
@media (min-width: 600px) { .tv-barra-inferior > * { flex: 0 0 auto; } }

/* Progreso de una tarea */
.tv-progreso { display: grid; gap: var(--tv-espacio-2); }
.tv-progreso progress { width: 100%; height: 12px; accent-color: var(--tv-boton); }
.tv-progreso__mensaje { color: var(--tv-tenue); font-size: .875rem; margin: 0; }

/* Subida (<tv-subida>) */
tv-subida { display: block; }
.tv-subida { display: grid; gap: var(--tv-espacio-3); }
.tv-subida__zona {
  display: grid; place-items: center; gap: var(--tv-espacio-2); text-align: center; padding: var(--tv-espacio-5);
  border: 2px dashed var(--tv-borde); border-radius: var(--tv-radio); background: var(--tv-superficie); cursor: pointer;
  min-height: 120px;
}
.tv-subida__zona[data-activa] { border-color: var(--tv-foco); background: var(--tv-seleccion); color: var(--tv-sobre-seleccion); }
.tv-subida__lista { display: grid; gap: var(--tv-espacio-2); margin: 0; padding: 0; list-style: none; }
.tv-subida__item { display: grid; gap: var(--tv-espacio-1); padding: var(--tv-espacio-3); background: var(--tv-superficie); border: 1px solid var(--tv-separador); border-radius: var(--tv-radio); }
.tv-subida__item progress { width: 100%; height: 8px; accent-color: var(--tv-boton); }
.tv-subida__item[data-estado="error"] { border-color: var(--tv-estado-error-texto); color: var(--tv-estado-error-texto); }
.tv-subida__item[data-estado="listo"] { border-color: var(--tv-estado-exito-texto); }
.tv-subida input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Utilidades */
.tv-tenue { color: var(--tv-tenue); }
.tv-pila { display: grid; gap: var(--tv-espacio-4); }
.tv-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tv-espacio-3); }
.tv-insignia { display: inline-block; padding: 1px var(--tv-espacio-2); border-radius: 999px; background: var(--tv-seleccion); color: var(--tv-sobre-seleccion); font-size: .8125rem; font-weight: 600; line-height: 1.5; vertical-align: middle; white-space: nowrap; }
.tv-insignia--exito { background: var(--tv-estado-exito-fondo); color: var(--tv-estado-exito-texto); }
.tv-insignia--aviso { background: var(--tv-estado-aviso-fondo); color: var(--tv-estado-aviso-texto); }
.tv-insignia--error { background: var(--tv-estado-error-fondo); color: var(--tv-estado-error-texto); }
.tv-insignia--neutra { background: var(--tv-secundario); color: var(--tv-sobre-secundario); }
.tv-seccion { margin-top: var(--tv-espacio-6); }

/* Pestañas de navegación dentro de un módulo (también llamadas .tv-subnav): <nav class="tv-pestanas"><a aria-current="page">…</a></nav> */
.tv-pestanas, .tv-subnav {
  display: flex; gap: var(--tv-espacio-1); margin: 0 0 var(--tv-espacio-5); border-bottom: 1px solid var(--tv-separador);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tv-pestanas::-webkit-scrollbar, .tv-subnav::-webkit-scrollbar { display: none; }
.tv-pestanas a, .tv-subnav a {
  display: inline-flex; align-items: center; min-height: var(--tv-tactil-min); padding: 0 var(--tv-espacio-3); flex: none;
  color: var(--tv-tenue); text-decoration: none; font-weight: 600; white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -1px; border-radius: var(--tv-radio) var(--tv-radio) 0 0;
  transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
.tv-pestanas a:hover, .tv-subnav a:hover { color: var(--tv-texto); background: var(--tv-secundario); }
.tv-pestanas a[aria-current], .tv-subnav a[aria-current] { color: var(--tv-primario); border-bottom-color: var(--tv-primario); }
.tv-pestanas a:focus-visible, .tv-subnav a:focus-visible { outline-offset: -3px; }
@media (max-width: 479px) { .tv-pestanas, .tv-subnav { gap: 0; } .tv-pestanas a, .tv-subnav a { padding: 0 var(--tv-espacio-2); font-size: .9375rem; flex: 1 0 auto; justify-content: center; } }

/* Filtros sobre una lista: campos en línea con el botón alineado a su base; en teléfono ocupan el ancho */
.tv-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--tv-espacio-3); margin: 0 0 var(--tv-espacio-4); }
.tv-filtros .tv-campo { flex: 1 1 200px; max-width: 320px; }
@media (max-width: 599px) { .tv-filtros .tv-campo { max-width: none; flex-basis: 100%; } .tv-filtros > .tv-boton { flex: 1 1 auto; } }

/* Pantalla estrecha y centrada (inicio de sesión, cambio forzado de contraseña, avisos de acceso) */
.tv-acceso { width: 100%; max-width: 420px; margin: clamp(var(--tv-espacio-4), 8vh, var(--tv-espacio-8)) auto 0; }
.tv-acceso__marca { display: flex; flex-direction: column; align-items: center; gap: var(--tv-espacio-2); margin-bottom: var(--tv-espacio-5); text-align: center; }
.tv-acceso__marca img { width: 56px; height: 64px; object-fit: contain; }
.tv-acceso__marca h1 { margin: 0; }
.tv-acceso .tv-tarjeta { padding: var(--tv-espacio-5); box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 4px 16px rgb(0 0 0 / .06); }
.tv-acceso__nota { text-align: center; font-size: .875rem; }
/* Páginas de error (404, 403, 500): mensaje centrado con una sola acción */
.tv-error { text-align: center; }
.tv-error h1 { margin-bottom: var(--tv-espacio-3); }
.tv-error p { color: var(--tv-tenue); }
.tv-error p:last-child { margin-top: var(--tv-espacio-5); }

/* Lista de datos: <dl class="tv-datos"><div><dt>…</dt><dd>…</dd></div></dl> */
.tv-datos { display: grid; gap: 0; margin: 0; }
.tv-datos > div { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: var(--tv-espacio-3); padding: var(--tv-espacio-2) 0; border-bottom: 1px solid var(--tv-separador); align-items: center; }
.tv-datos > div:last-child { border-bottom: 0; padding-bottom: 0; }
.tv-datos > div:first-child { padding-top: 0; }
.tv-datos dt { color: var(--tv-tenue); font-size: .875rem; }
.tv-datos dd { margin: 0; min-width: 0; }

/* Un valor que se copia a mano (una contraseña que se muestra una sola vez) */
.tv-clave {
  display: inline-block; font-family: var(--tv-fuente-mono); font-size: 1.125rem; font-weight: 600; letter-spacing: .02em;
  padding: var(--tv-espacio-1) var(--tv-espacio-3); border-radius: var(--tv-radio); background: var(--tv-seleccion); color: var(--tv-sobre-seleccion);
  user-select: all; -webkit-user-select: all; overflow-wrap: anywhere;
}

/* Fila de lista dentro de una tarjeta que es enlace: título a la izquierda, flecha a la derecha */
.tv-tarjeta--enlace:focus-visible { outline-offset: 2px; }
.tv-tarjeta__cabecera { display: flex; align-items: center; gap: var(--tv-espacio-3); margin-bottom: var(--tv-espacio-2); }
.tv-tarjeta__cabecera > :is(h2, h3, .tv-tarjeta__titulo) { margin: 0; font-size: 1.0625rem; min-width: 0; }
.tv-tarjeta__cabecera img { width: 40px; height: 40px; flex: none; object-fit: contain; }
.tv-lista-simple { margin: 0; padding: 0; list-style: none; }
.tv-lista-simple > li { display: flex; align-items: baseline; gap: var(--tv-espacio-2); }
.tv-lista-simple > li > .tv-insignia { flex: none; }
.tv-lista-simple.tv-rejilla { gap: var(--tv-espacio-2) var(--tv-espacio-4); margin-bottom: 0; }
.tv-paginas { margin-top: var(--tv-espacio-4); }

/* Copiar un valor (contraseña que se muestra una sola vez): <button class="tv-boton tv-boton--secundario" data-tv-copiar="valor"> */
.tv-boton[data-tv-copiar][data-estado="copiado"] { background: var(--tv-estado-exito-fondo); color: var(--tv-estado-exito-texto); border-color: var(--tv-estado-exito-texto); }
.tv-copiar-acciones { display: flex; flex-wrap: wrap; gap: var(--tv-espacio-2); margin-top: var(--tv-espacio-4); }
@media (max-width: 599px) { .tv-copiar-acciones > .tv-boton { flex: 1 1 100%; } }

/* Campo de contraseña con botón «Mostrar» */
.tv-campo__clave { position: relative; display: block; }
.tv-campo__clave > input { padding-right: calc(var(--tv-tactil-min) + var(--tv-espacio-2)) !important; }
.tv-campo__ver {
  position: absolute; top: 0; right: 0; width: var(--tv-tactil-min); height: var(--tv-tactil-min); display: grid; place-items: center;
  border: 0; border-radius: var(--tv-radio); background: none; color: var(--tv-tenue); cursor: pointer;
}
.tv-campo__ver:hover { color: var(--tv-texto); background: var(--tv-secundario); }
.tv-campo__ver svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tv-campo__ver .tv-ojo-cerrado { display: none; }
.tv-campo__ver[aria-pressed="true"] .tv-ojo-abierto { display: none; }
.tv-campo__ver[aria-pressed="true"] .tv-ojo-cerrado { display: inline; }

/* Zona de peligro: acciones que no se deshacen, separadas de las demás y con su propio título */
.tv-peligro { border-color: var(--tv-estado-error-texto); }
.tv-peligro > h2:first-child { color: var(--tv-estado-error-texto); }
.tv-descripcion { margin: 0 0 var(--tv-espacio-3); color: var(--tv-tenue); }
.tv-confirmar-texto code { font-weight: 700; }