/* ==========================================================================
   tadolia · base visual v1 · componentes (propuesta)
   Requiere ../tokens/tadolia.tokens.css.
   Los nombres reutilizan los de public/assets/app.css cuando ya existen
   (tdl-button, tdl-secondary, tdl-danger, tdl-card, tdl-status, tdl-notice,
   tdl-error, tdl-hint, tdl-text-button) y agregan los nuevos con el mismo prefijo.
   Regla de marca: ningún elemento con esquinas rectas (mínimo 8 px de radio).
   ========================================================================== */

.tdl-ui { font-family: var(--tdl-fuente-texto); font-size: var(--tdl-t-cuerpo); line-height: var(--tdl-interlineado-texto); color: var(--tdl-texto); }
.tdl-ui :where(h1, h2, h3) { font-family: var(--tdl-fuente-titulos); font-weight: var(--tdl-peso-titulo); letter-spacing: var(--tdl-espaciado-titulo); line-height: var(--tdl-interlineado-titulo); margin: 0; }
.tdl-ui h1 { font-size: var(--tdl-t-1); }
.tdl-ui h2 { font-size: var(--tdl-t-2); }
.tdl-ui h3 { font-size: var(--tdl-t-3); font-weight: var(--tdl-peso-subtitulo); }

/* ---------- Botones ---------- */
.tdl-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tdl-e-2);
  min-height: var(--tdl-boton); padding: 0 var(--tdl-e-6);
  border-radius: var(--tdl-r-pastilla); border: var(--tdl-borde-grosor) solid var(--tdl-accion);
  background: var(--tdl-accion); color: var(--tdl-sobre-accion);
  font-family: var(--tdl-fuente-titulos); font-weight: var(--tdl-peso-subtitulo); font-size: var(--tdl-t-cuerpo);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--tdl-duracion) var(--tdl-curva), border-color var(--tdl-duracion) var(--tdl-curva);
}
.tdl-button:hover { background: var(--tdl-accion-hover); border-color: var(--tdl-accion-hover); }
.tdl-button.tdl-secondary { background: transparent; color: var(--tdl-noche); border-color: var(--tdl-noche); }
.tdl-button.tdl-secondary:hover { background: var(--tdl-arena); }
.tdl-button.tdl-dark { background: var(--tdl-noche); border-color: var(--tdl-noche); }
.tdl-button.tdl-danger { background: var(--tdl-error); border-color: var(--tdl-error); }
.tdl-button.tdl-full { width: 100%; }
.tdl-button[disabled], .tdl-button[aria-disabled="true"] { background: var(--tdl-arena); border-color: var(--tdl-arena); color: var(--tdl-pizarra); cursor: not-allowed; }
.tdl-text-button { background: none; border: 0; padding: 0; min-height: var(--tdl-toque); color: var(--tdl-enlace); font: inherit; font-weight: var(--tdl-peso-fuerte); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* ---------- Campos ---------- */
.tdl-field { display: flex; flex-direction: column; gap: var(--tdl-e-2); }
.tdl-field > label, .tdl-field > legend { font-weight: var(--tdl-peso-fuerte); font-size: 0.9375rem; }
.tdl-optional { font-weight: 400; color: var(--tdl-pizarra); }
.tdl-input {
  width: 100%; box-sizing: border-box; min-height: var(--tdl-campo); padding: 0 var(--tdl-e-4);
  border: var(--tdl-borde-grosor) solid var(--tdl-borde-campo); border-radius: var(--tdl-r-control);
  background: var(--tdl-superficie); color: var(--tdl-texto); font: inherit; font-size: 1.0625rem;
}
textarea.tdl-input { padding: var(--tdl-e-3) var(--tdl-e-4); min-height: 112px; line-height: 1.45; resize: vertical; }
.tdl-input:focus { border-color: var(--tdl-anil); outline: 3px solid var(--tdl-anil-suave); outline-offset: 0; }
.tdl-input[aria-invalid="true"] { border-color: var(--tdl-error); }
.tdl-hint { font-size: var(--tdl-t-chico); color: var(--tdl-pizarra); }
.tdl-field-error { font-size: var(--tdl-t-chico); color: var(--tdl-error); font-weight: var(--tdl-peso-fuerte); }
.tdl-counter { font-size: var(--tdl-t-mini); color: var(--tdl-pizarra); text-align: right; }
.tdl-password { position: relative; }
.tdl-password .tdl-input { padding-right: 96px; }
.tdl-password button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 40px; padding: 0 var(--tdl-e-3); border: 0; border-radius: 10px; background: var(--tdl-anil-suave); color: var(--tdl-anil); font: inherit; font-size: var(--tdl-t-chico); font-weight: var(--tdl-peso-fuerte); cursor: pointer; }
.tdl-check { display: flex; gap: var(--tdl-e-3); align-items: flex-start; font-weight: var(--tdl-peso-fuerte); }
.tdl-check input { width: 24px; height: 24px; margin: 0; accent-color: var(--tdl-anil); flex-shrink: 0; }

/* Control segmentado (dos o tres opciones excluyentes) */
.tdl-segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: var(--tdl-r-pastilla); background: var(--tdl-arena); }
.tdl-segmented label { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: var(--tdl-r-pastilla); cursor: pointer; color: var(--tdl-texto-2); }
.tdl-segmented input { position: absolute; opacity: 0; }
.tdl-segmented label:has(input:checked) { background: var(--tdl-superficie); color: var(--tdl-texto); font-weight: var(--tdl-peso-fuerte); box-shadow: var(--tdl-sombra-suave); }
.tdl-segmented label:has(input:focus-visible) { outline: 3px solid var(--tdl-foco); outline-offset: 2px; }

/* Lista de requisitos que se marca (contraseña) */
.tdl-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tdl-e-2); }
.tdl-checklist li { display: flex; gap: var(--tdl-e-3); align-items: center; color: var(--tdl-pizarra); }
.tdl-checklist li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--tdl-borde-campo); flex-shrink: 0; }
.tdl-checklist li.is-ok { color: var(--tdl-texto); }
.tdl-checklist li.is-ok::before { border-color: var(--tdl-anil); background: var(--tdl-anil) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* ---------- Estados ---------- */
.tdl-status { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 var(--tdl-e-3); border-radius: var(--tdl-r-pastilla); font-size: 0.8125rem; font-weight: 700; background: var(--tdl-arena); color: var(--tdl-pizarra); border: 0; }
.tdl-status.is-published { background: var(--tdl-anil); color: var(--tdl-blanco); }
.tdl-status.is-pending { background: var(--tdl-coral-suave); color: var(--tdl-coral-tierra); }
.tdl-saved { display: inline-flex; align-items: center; gap: var(--tdl-e-2); font-size: var(--tdl-t-mini); color: var(--tdl-pizarra); }
.tdl-saved svg { color: var(--tdl-anil); }
.tdl-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--tdl-e-3); border-radius: var(--tdl-r-pastilla); background: var(--tdl-arena); color: var(--tdl-texto); font-size: var(--tdl-t-chico); border: 0; cursor: pointer; }
.tdl-chip[aria-pressed="true"] { background: var(--tdl-anil); color: var(--tdl-blanco); font-weight: var(--tdl-peso-fuerte); }

/* ---------- Avisos ---------- */
.tdl-notice, .tdl-warning, .tdl-error { display: flex; gap: var(--tdl-e-3); padding: var(--tdl-e-4); border-radius: var(--tdl-r-tarjeta); font-size: 0.9375rem; line-height: 1.45; border: 0; }
.tdl-notice { background: var(--tdl-anil-suave); color: var(--tdl-texto); }
.tdl-warning { background: var(--tdl-coral-suave); color: var(--tdl-texto); }
.tdl-error { background: var(--tdl-error-suave); color: var(--tdl-texto); }
.tdl-error svg { color: var(--tdl-error); flex-shrink: 0; }

/* ---------- Superficies ---------- */
.tdl-card { background: var(--tdl-superficie); border: 1px solid var(--tdl-borde); border-radius: var(--tdl-r-tarjeta); padding: var(--tdl-e-4); }
.tdl-panel { background: var(--tdl-anil-suave); border-radius: var(--tdl-r-panel); padding: var(--tdl-e-5); }
.tdl-panel.is-dark { background: var(--tdl-noche); color: var(--tdl-blanco); }

/* ---------- Navegación ---------- */
.tdl-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--tdl-e-4); min-height: 56px; padding: 0 var(--tdl-margen-movil); }
.tdl-lockup { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.tdl-lockup img { display: block; height: 28px; width: auto; }
.tdl-tabs { display: flex; gap: var(--tdl-e-1); padding: 0 var(--tdl-e-4); border-bottom: 1px solid var(--tdl-borde); }
.tdl-tabs a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--tdl-pizarra); text-decoration: none; border-bottom: 3px solid transparent; }
.tdl-tabs a[aria-current="page"] { color: var(--tdl-texto); font-weight: var(--tdl-peso-fuerte); border-bottom-color: var(--tdl-anil); }
.tdl-progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.tdl-progress span { height: 6px; border-radius: var(--tdl-r-pastilla); background: var(--tdl-anil-tenue); }
.tdl-progress span.is-done { background: var(--tdl-anil); }
.tdl-actionbar { position: sticky; bottom: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: var(--tdl-e-3) var(--tdl-e-4) calc(var(--tdl-e-5) + env(safe-area-inset-bottom)); background: var(--tdl-fondo); border-top: 1px solid var(--tdl-borde); }

/* ---------- Contacto ---------- */
.tdl-contact-item { display: flex; align-items: center; gap: var(--tdl-e-3); }
.tdl-contact-item .tdl-icon-box { width: 40px; height: 40px; border-radius: 12px; background: var(--tdl-anil-suave); color: var(--tdl-anil); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tdl-contact-item .tdl-grow { flex: 1; min-width: 0; }
.tdl-contact-item small { display: block; color: var(--tdl-pizarra); font-size: var(--tdl-t-chico); }
.tdl-icon-button { width: var(--tdl-toque); height: var(--tdl-toque); border-radius: 50%; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--tdl-texto); cursor: pointer; }
.tdl-icon-button:hover { background: var(--tdl-arena); }

/* ---------- Imágenes ---------- */
.tdl-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tdl-slot { aspect-ratio: 4 / 3; border-radius: var(--tdl-r-tarjeta); border: 2px dashed var(--tdl-borde-campo); background: transparent; color: var(--tdl-texto-2); font: inherit; font-weight: var(--tdl-peso-fuerte); cursor: pointer; }
.tdl-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--tdl-r-tarjeta) - 2px); }
.tdl-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--tdl-coral); color: var(--tdl-noche); display: inline-flex; align-items: center; justify-content: center; font-family: var(--tdl-fuente-titulos); font-weight: 700; font-size: 1.375rem; flex-shrink: 0; overflow: hidden; }

/* ---------- Hoja inferior de confirmación ---------- */
.tdl-sheet { background: var(--tdl-fondo); border-radius: var(--tdl-r-hoja) var(--tdl-r-hoja) 0 0; padding: var(--tdl-e-3) var(--tdl-e-6) var(--tdl-e-8); display: flex; flex-direction: column; gap: var(--tdl-e-4); box-shadow: var(--tdl-sombra-flotante); }
.tdl-sheet::before { content: ""; align-self: center; width: 44px; height: 5px; border-radius: var(--tdl-r-pastilla); background: var(--tdl-borde-campo); }

/* ---------- Firma ---------- */
.tdl-signature { display: inline-flex; align-items: center; gap: 6px; font-size: var(--tdl-t-mini); color: var(--tdl-pizarra); text-decoration: none; }
.tdl-signature img { height: 14px; width: auto; }

/* ---------- Íconos de interfaz ---------- */
.tdl-ico { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }