@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --tinta: #1B2430;
  --tinta-suave: #29344333;
  --papel: #EFE6D3;
  --papel-suave: #E4D9C0;
  --sello: #B23A2E;
  --sello-suave: #B23A2E1A;
  --bronce: #B08D57;
  --verde-archivo: #4C7A6F;
  --verde-accion: #2FA766;
  --verde-accion-oscuro: #22824F;
  --texto-en-tinta: #F1EAD9;
  --texto-en-papel: #1B2430;
  --texto-tenue: #8A93A3;

  --display: 'Nunito', sans-serif;
  --cuerpo: 'Nunito', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --radio: 14px;
  --sombra: 0 8px 24px rgba(27, 36, 48, 0.18);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--tinta);
  color: var(--texto-en-tinta);
  font-family: var(--cuerpo);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---------- Encabezados y tipografía ---------- */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.01em;
}

.pantalla { padding: 28px 24px 100px; flex: 1; }

.marca {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}
.logo-app { height: 52px; width: auto; display: block; }

/* ---------- Formularios (login / registro) ---------- */
.tarjeta-auth {
  background: var(--papel);
  color: var(--texto-en-papel);
  border-radius: var(--radio);
  padding: 32px 24px;
  box-shadow: var(--sombra);
}

.tarjeta-auth h1 { font-size: 26px; margin-bottom: 6px; }
.tarjeta-auth p.subtitulo { color: #56606f; margin: 0 0 24px; font-size: 14px; }

label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #56606f;
  margin: 16px 0 6px;
}

input[type=email], input[type=password], input[type=text], input[type=file] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid #d8cdae;
  background: #fbf8f1;
  font-family: var(--cuerpo);
  font-size: 15px;
  color: var(--texto-en-papel);
}
input:focus { outline: 2px solid var(--sello); outline-offset: 1px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 10px;
  border: none;
  font-family: var(--cuerpo);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  margin-top: 22px;
  transition: transform 0.12s ease;
}
.btn:active { transform: scale(0.98); }
.btn-sello { background: var(--sello); color: #fff; }
.btn-verde { background: linear-gradient(135deg, var(--verde-accion), var(--verde-accion-oscuro)); color: #fff; }
.btn-fantasma {
  background: transparent; color: var(--texto-en-tinta);
  border: 1.5px solid var(--tinta-suave);
}
.enlace-secundario {
  display: block; text-align: center; margin-top: 16px;
  color: #56606f; font-size: 13.5px; text-decoration: underline; cursor: pointer;
  background: none; border: none; width: 100%; font-family: var(--cuerpo);
}

.checkbox-privacidad {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 18px;
  font-size: 12.5px; color: #56606f; cursor: pointer; text-transform: none;
  letter-spacing: normal;
}
.checkbox-privacidad input { width: auto; margin-top: 2px; flex-shrink: 0; }
.checkbox-privacidad a { color: var(--sello); font-weight: 600; }

.separador-o {
  display: flex; align-items: center; text-align: center; margin: 18px 0 14px;
  color: #a89f87; font-size: 12px;
}
.separador-o::before, .separador-o::after {
  content: ''; flex: 1; border-bottom: 1px solid var(--papel-suave);
}
.separador-o span { padding: 0 10px; }
.google-btn-contenedor { display: flex; justify-content: center; }

.btn-facebook {
  width: 100%; margin-top: 10px; padding: 10px 16px;
  background: #1877F2; color: #fff; border: none; border-radius: 8px;
  font-family: var(--cuerpo); font-weight: 600; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-facebook .icono-fb {
  font-family: Georgia, serif; font-weight: 700; font-style: italic;
  background: #fff; color: #1877F2; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}

.link-legal-footer {
  display: block; text-align: center; margin-top: 18px; font-size: 11.5px;
  color: #8a8060; text-decoration: underline;
}

.error-msg {
  background: var(--sello-suave); color: var(--sello);
  padding: 10px 14px; border-radius: 8px; font-size: 13.5px; margin-top: 14px;
}
.ok-msg {
  background: #4C7A6F1A; color: var(--verde-archivo);
  padding: 10px 14px; border-radius: 8px; font-size: 13.5px; margin-top: 14px;
}

/* Avisos IMPORTANTES: mucho más visibles que un mensaje normal —
   borde grueso de color, tamaño más grande, con acción clara */
.aviso-importante {
  background: var(--papel); color: var(--texto-en-papel);
  border: 2px solid var(--sello); border-radius: 12px;
  padding: 16px; margin-top: 16px; font-size: 14px; font-weight: 600;
  line-height: 1.5; box-shadow: 0 4px 14px rgba(178,58,46,0.15);
}
.aviso-importante.aviso-bronce { border-color: var(--bronce); box-shadow: 0 4px 14px rgba(176,141,87,0.2); }
.btn-inline {
  display: inline-block; margin-top: 10px; background: var(--sello); color: #fff;
  border: none; border-radius: 8px; padding: 8px 14px; font-family: var(--cuerpo);
  font-weight: 700; font-size: 13px; cursor: pointer;
}
.aviso-bronce .btn-inline { background: var(--bronce); }

/* ---------- Dashboard ---------- */
.saludo-tira {
  background: var(--papel);
  color: var(--texto-en-papel);
  border-radius: var(--radio);
  padding: 22px;
  box-shadow: var(--sombra);
  position: relative;
  overflow: hidden;
}
.saludo-tira::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(90deg, var(--sello) 0 14px, transparent 14px 20px);
}
.saludo-tira h1 { font-size: 22px; }
.saludo-tira .fecha { color: #56606f; font-size: 13px; margin-top: 4px; font-family: var(--mono); }

.resumen-fila {
  display: flex; gap: 12px; margin-top: 22px;
}
.resumen-caja {
  flex: 1; background: var(--tinta-suave); border-radius: 10px;
  padding: 14px; text-align: center;
}
.resumen-caja .num { font-family: var(--mono); font-size: 22px; font-weight: 600; }
.resumen-caja .lbl { font-size: 11px; color: var(--texto-tenue); margin-top: 2px; }

.seccion-titulo {
  font-family: var(--display); font-size: 17px; margin: 28px 0 12px;
  display: flex; align-items: center; justify-content: space-between;
}

/* ---------- Tarjetas de documentos ---------- */
.doc-card {
  background: var(--papel); color: var(--texto-en-papel);
  border-radius: 12px; padding: 16px; margin-bottom: 12px;
  display: flex; gap: 14px; align-items: center;
  box-shadow: 0 2px 8px rgba(27,36,48,0.12);
}
.doc-sello {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.doc-sello svg { width: 22px; height: 22px; }
.doc-info { flex: 1; min-width: 0; }
.doc-info .titulo { font-weight: 600; font-size: 15px; }
.doc-info .meta { font-size: 12.5px; color: #56606f; margin-top: 2px; }
.doc-info .fecha-venc { font-family: var(--mono); font-size: 12.5px; margin-top: 4px; }

.doc-acciones {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
}
.btn-vista-previa {
  background: var(--tinta); color: var(--texto-en-tinta); border: none;
  border-radius: 20px; padding: 6px 13px; font-size: 12px;
  font-family: var(--cuerpo); font-weight: 500; cursor: pointer;
}
.doc-borrar {
  background: none; border: none; font-size: 17px; cursor: pointer;
  color: #a89f87; padding: 6px 10px; margin-left: auto; flex-shrink: 0;
}
.doc-borrar:hover { color: var(--sello); }

.badge-compartido {
  display: inline-block; background: #4C7A6F26; color: var(--verde-archivo);
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; margin-top: 6px;
}

.enlace-plan-pareja { display: none; }

.codigo-pareja {
  font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: 3px;
  background: var(--papel-suave); color: var(--texto-en-papel); border-radius: 10px;
  padding: 16px; text-align: center; margin: 16px 0;
}

.grid-accesos-destacados { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.tarjeta-acceso-destacado {
  display: flex; align-items: center; gap: 14px; width: 100%;
  border: none; border-radius: 14px; padding: 16px 18px; cursor: pointer;
  color: #fff; text-align: left; font-family: var(--cuerpo);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.4);
}
.tarjeta-emergencia-acceso { background: linear-gradient(135deg, var(--sello), #8a2c22); }
.tarjeta-garantias-acceso { background: linear-gradient(135deg, var(--bronce), #8a6c3d); }
.tarjeta-pareja-acceso { background: linear-gradient(135deg, var(--verde-archivo), #365850); }
.acceso-icono { font-size: 26px; flex-shrink: 0; }
.acceso-texto { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.acceso-texto strong { font-size: 15px; }
.acceso-texto span { font-size: 12px; opacity: 0.9; }
.acceso-flecha { font-size: 18px; opacity: 0.8; }

/* ---------- Carpetas Mágicas (Premium) ---------- */
.carpeta-magica { margin-bottom: 16px; }
.carpeta-encabezado {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--tinta-suave); border-radius: 10px; padding: 12px 16px; margin-bottom: 10px;
}
.carpeta-icono { width: 20px; height: 20px; flex-shrink: 0; }
.carpeta-icono svg { width: 100%; height: 100%; }
.carpeta-nombre { font-weight: 700; font-size: 14.5px; flex: 1; }
.carpeta-contador {
  background: var(--bronce); color: #1B2430; font-size: 11px; font-weight: 800;
  padding: 2px 9px; border-radius: 20px;
}
.carpeta-chevron { transition: transform 0.2s ease; width: 16px; height: 16px; opacity: 0.7; transform: rotate(90deg); }
.carpeta-chevron svg { width: 100%; height: 100%; }
.carpeta-cerrada .carpeta-chevron { transform: rotate(0deg); }
.carpeta-cerrada .carpeta-contenido { display: none; }

.carpeta-sin-categorizar .carpeta-encabezado { background: var(--tinta-suave); border: 1px dashed var(--texto-tenue); }
.aviso-sin-categorizar {
  font-size: 12.5px; color: var(--texto-tenue); margin: 0 0 10px; padding: 0 2px;
}

/* ---------- Aviso de Carpetas Mágicas (pantalla Documentos, plan Free) ---------- */
.aviso-carpetas-magicas {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 4px 0 18px; padding: 14px 16px; border-radius: var(--radio);
  background: linear-gradient(135deg, #B08D571F, transparent);
  border: 1px solid #B08D5755;
}
.aviso-carpetas-magicas .icono {
  font-size: 20px; line-height: 1; flex-shrink: 0; margin-top: 1px;
}
.aviso-carpetas-magicas .texto { flex: 1; }
.aviso-carpetas-magicas .texto strong { color: var(--bronce); font-size: 13.5px; }
.aviso-carpetas-magicas .texto p {
  margin: 3px 0 0; font-size: 12.5px; color: var(--texto-tenue); line-height: 1.5;
}
.aviso-carpetas-magicas .texto button {
  margin-top: 8px; background: none; border: none; padding: 0;
  color: var(--bronce); font-family: var(--cuerpo); font-weight: 700; font-size: 12.5px;
  cursor: pointer; text-decoration: underline;
}

/* ---------- Botón de volver ---------- */
.boton-volver-pantalla {
  display: flex; align-items: center; gap: 8px; background: none; border: none;
  color: var(--texto-en-tinta); font-family: var(--cuerpo); font-weight: 600; font-size: 14px;
  cursor: pointer; padding: 0; margin-bottom: 20px;
}
.boton-volver-pantalla span { width: 18px; height: 18px; display: flex; }
.boton-volver-pantalla svg { width: 100%; height: 100%; }

/* ---------- Buscador de documentos ---------- */
.caja-buscador {
  display: flex; align-items: center; gap: 10px; background: var(--tinta-suave);
  border-radius: 10px; padding: 11px 14px; margin-bottom: 18px;
}
.buscador-icono { width: 18px; height: 18px; color: var(--texto-tenue); flex-shrink: 0; }
.buscador-icono svg { width: 100%; height: 100%; }
.caja-buscador input {
  border: none; background: none; color: var(--texto-en-tinta); font-family: var(--cuerpo);
  font-size: 14px; width: 100%; outline: none;
}
.caja-buscador input::placeholder { color: var(--texto-tenue); }

/* ---------- Menú "Más" ---------- */
.menu-lista {
  background: var(--papel); border-radius: 14px; overflow: hidden;
}
.menu-item {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: none; border: none; border-bottom: 1px solid var(--papel-suave);
  padding: 16px; cursor: pointer; text-align: left; font-family: var(--cuerpo);
}
.menu-item:last-child { border-bottom: none; }
.menu-item-icono {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--tinta-suave); color: var(--texto-en-papel);
}
.menu-item-icono svg { width: 19px; height: 19px; }
.menu-icono-rojo { background: var(--sello-suave); color: var(--sello); }
.menu-icono-bronce { background: #B08D5726; color: var(--bronce); }
.menu-icono-verde { background: #4C7A6F26; color: var(--verde-archivo); }
.menu-item-texto { flex: 1; display: flex; flex-direction: column; color: var(--texto-en-papel); }
.menu-item-texto strong { font-size: 14.5px; }
.menu-item-texto span { font-size: 12px; color: #56606f; }
.menu-item-chevron { width: 16px; height: 16px; color: #a89f87; flex-shrink: 0; }
.menu-item-chevron svg { width: 100%; height: 100%; }

/* ---------- Modal de vista previa ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(27, 36, 48, 0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
  backdrop-filter: blur(2px);
}
.modal-contenido {
  background: var(--tinta); border-radius: var(--radio);
  max-width: 440px; width: 100%; max-height: 88vh; overflow-y: auto;
  padding: 18px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.modal-cerrar {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  background: rgba(27,36,48,0.7); color: #fff; border: none;
  width: 32px; height: 32px; border-radius: 50%; font-size: 15px; cursor: pointer;
}

.tarjeta-datos-ia {
  background: var(--papel); color: var(--texto-en-papel);
  border-radius: 12px; padding: 18px; margin-top: 14px;
}
.tarjeta-datos-ia .titulo-doc { font-family: var(--display); font-size: 18px; margin-bottom: 10px; }
.tarjeta-datos-ia .fila-dato {
  display: flex; justify-content: space-between; padding: 7px 0;
  border-bottom: 1px solid var(--papel-suave); font-size: 13px;
}
.tarjeta-datos-ia .fila-dato:last-child { border-bottom: none; }
.tarjeta-datos-ia .fila-dato .etiqueta { color: #56606f; }
.tarjeta-datos-ia .fila-dato .valor { font-family: var(--mono); font-weight: 600; text-align: right; }
.tarjeta-datos-ia .etiqueta-ia {
  display: inline-block; background: var(--sello-suave); color: var(--sello);
  font-size: 10px; padding: 3px 8px; border-radius: 20px; margin-top: 8px;
}
.btn-editar-datos {
  display: block; width: 100%; margin-top: 14px; background: var(--tinta);
  color: var(--texto-en-tinta); border: none; border-radius: 8px;
  padding: 10px; font-family: var(--cuerpo); font-weight: 600; font-size: 13px; cursor: pointer;
}

.tarjeta-edicion {
  background: var(--papel); color: var(--texto-en-papel);
  border-radius: 12px; padding: 18px; margin-top: 10px;
}
.tarjeta-edicion label {
  color: #56606f; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  margin: 12px 0 5px; display: block;
}
.tarjeta-edicion label:first-child { margin-top: 0; }
.tarjeta-edicion input, .tarjeta-edicion select {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1.5px solid #d8cdae;
  background: #fbf8f1; font-family: var(--cuerpo); font-size: 14px; color: var(--texto-en-papel);
}
.tarjeta-edicion .btn {
  margin-top: 16px;
}

.preview-archivo-contenedor {
  background: var(--papel-suave); border-radius: 10px;
  overflow: hidden; min-height: 200px; display: flex; align-items: center; justify-content: center;
  position: relative;
}
.preview-archivo-contenedor img { width: 100%; display: block; }
.preview-archivo-contenedor iframe { width: 100%; height: 420px; border: none; }

/* "Pines" que señalan de forma aproximada dónde la IA encontró cada dato.
   No son coordenadas exactas de píxel (la IA no las da) — son indicadores
   aproximados que dan la sensación de "esto fue lo que detectamos". */
.pin-dato {
  position: absolute; background: var(--sello); color: #fff;
  font-size: 10.5px; font-weight: 600; padding: 4px 9px; border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25); pointer-events: none;
  font-family: var(--cuerpo); white-space: nowrap;
}
.pin-tipo { top: 10px; left: 10px; background: var(--verde-archivo); }
.pin-fecha { top: 10px; right: 10px; }
.pin-monto { bottom: 10px; right: 10px; background: var(--bronce); }

.modal-aviso-contenido {
  text-align: center; padding: 28px 22px;
}
.icono-aviso-grande { width: 46px; height: 46px; margin: 0 auto 10px; color: var(--bronce); }
.icono-aviso-grande svg { width: 100%; height: 100%; }

.icono-inline { display: inline-flex; width: 12px; height: 12px; vertical-align: -1.5px; }
.icono-inline svg { width: 100%; height: 100%; }
.modal-aviso-contenido h3 {
  font-size: 18px; color: var(--texto-en-tinta); margin-bottom: 12px;
}
.modal-aviso-contenido p {
  font-size: 13.5px; color: var(--texto-en-tinta); opacity: 0.85;
  line-height: 1.55; margin: 0 0 12px; text-align: left;
}
.modal-aviso-contenido p a { color: var(--bronce); opacity: 1; font-weight: 600; }

.estado-vencido { color: var(--sello); }
.estado-proximo { color: var(--bronce); }
.estado-al-dia { color: var(--verde-archivo); }

.vacio {
  text-align: center; padding: 50px 20px; color: var(--texto-tenue);
}
.vacio .sello-grande {
  width: 70px; height: 70px; border-radius: 50%; border: 2px dashed var(--texto-tenue);
  margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 28px;
}

/* ---------- Bóveda de Emergencia ---------- */
.tarjeta-emergencia-header {
  background: linear-gradient(135deg, var(--sello), #8a2c22);
  border-radius: var(--radio); padding: 26px 22px; text-align: center; margin-bottom: 22px;
  box-shadow: 0 10px 30px -10px rgba(178,58,46,0.5);
}
.icono-emergencia-grande { width: 40px; height: 40px; margin: 0 auto 10px; color: #fff; }
.icono-emergencia-grande svg { width: 100%; height: 100%; }
.tarjeta-emergencia-header h1 { font-size: 20px; color: #fff; margin-bottom: 6px; }
.tarjeta-emergencia-header p { font-size: 13px; color: #ffe0da; opacity: 0.95; max-width: 320px; margin: 0 auto; }

.tarjeta-emergencia {
  background: var(--papel); color: var(--texto-en-papel);
  border-radius: 12px; padding: 16px; margin-bottom: 12px;
  display: flex; gap: 14px; align-items: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(27,36,48,0.12);
}
.emergencia-icono {
  width: 46px; height: 46px; border-radius: 50%; background: var(--sello-suave); color: var(--sello);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.emergencia-icono svg { width: 22px; height: 22px; }
.emergencia-info { flex: 1; min-width: 0; }
.emergencia-titulo { font-weight: 700; font-size: 15px; }
.emergencia-tipo { font-size: 12.5px; color: #56606f; }
.emergencia-poliza { font-size: 12px; color: #56606f; font-family: var(--mono); margin-top: 2px; }
.btn-llamar {
  background: var(--verde-archivo); color: #fff; padding: 9px 14px; border-radius: 8px;
  font-size: 12.5px; font-weight: 700; text-decoration: none; flex-shrink: 0;
}

/* ---------- Rescate de Garantías ---------- */
.tarjeta-garantias-header {
  background: linear-gradient(135deg, var(--bronce), #8a6c3d);
  border-radius: var(--radio); padding: 26px 22px; text-align: center; margin-bottom: 22px;
  box-shadow: 0 10px 30px -10px rgba(176,141,87,0.5);
}
.tarjeta-garantias-header h1 { font-size: 20px; color: #fff; margin-bottom: 6px; }
.tarjeta-garantias-header p { font-size: 13px; color: #fff2de; opacity: 0.95; max-width: 320px; margin: 0 auto; }

.tarjeta-garantia {
  background: var(--papel); color: var(--texto-en-papel);
  border-radius: 12px; padding: 16px; margin-bottom: 12px;
  display: flex; gap: 14px; align-items: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(27,36,48,0.12); border-left: 4px solid var(--bronce);
}
.tarjeta-garantia.garantia-urgente { border-left-color: var(--sello); }
.garantia-icono {
  width: 46px; height: 46px; border-radius: 50%; background: #B08D5726; color: var(--bronce);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.garantia-icono svg { width: 22px; height: 22px; }
.garantia-info { flex: 1; min-width: 0; }
.garantia-titulo { font-weight: 700; font-size: 15px; }
.garantia-monto { font-size: 12px; color: #56606f; font-family: var(--mono); margin-top: 2px; }
.garantia-dias { font-size: 12.5px; color: var(--bronce); font-weight: 700; margin-top: 4px; }
.dias-urgente { color: var(--sello); }

.caja-premium {
  margin-top: 20px; padding: 20px; border-radius: var(--radio);
  background: linear-gradient(135deg, var(--bronce), #8f6f3d);
  color: #fff; text-align: center;
}
.caja-premium h3 { font-size: 16px; margin-bottom: 6px; }
.caja-premium p { font-size: 13px; margin: 0 0 14px; opacity: 0.9; }
.caja-premium button {
  background: #fff; color: var(--bronce); border: none; border-radius: 8px;
  padding: 10px 16px; font-family: var(--cuerpo); font-weight: 600; cursor: pointer; font-size: 13.5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.caja-premium button:disabled { opacity: 0.75; cursor: default; }
.spinner-boton {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; opacity: 0.85;
  animation: girar 0.7s linear infinite; flex-shrink: 0;
  display: inline-block; vertical-align: -2px; margin-right: 4px;
}
@keyframes girar { to { transform: rotate(360deg); } }
.botones-premium { display: flex; gap: 10px; justify-content: center; }
.ahorro-anual { font-size: 11.5px; margin-top: 10px; opacity: 0.85; }

.aviso-limite {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: var(--tinta-suave); font-size: 12.5px; color: var(--texto-en-tinta);
}
.aviso-limite strong { color: var(--bronce); }
.aviso-premium-activo {
  background: #4C7A6F26; border: 1px solid var(--verde-archivo);
}
.aviso-premium-activo strong { color: var(--verde-archivo); }
.enlace-cancelar {
  display: block; margin-top: 8px; background: none; border: none;
  color: var(--texto-tenue); text-decoration: underline; font-size: 11.5px;
  cursor: pointer; font-family: var(--cuerpo); padding: 0;
}

.nota-transparencia {
  font-size: 12.5px; color: var(--texto-tenue); margin-top: 12px; text-align: center;
}

/* ---------- Subir documento ---------- */
.zona-subida {
  border: 2px dashed var(--tinta-suave); border-radius: var(--radio);
  padding: 30px 20px; text-align: center; margin-bottom: 18px;
  background: var(--tinta-suave);
}
.zona-subida input[type=file] { border: none; background: none; padding: 0; }
.preview-archivo {
  font-size: 13px; color: var(--texto-tenue); margin-top: 10px;
}
.botones-subida { display: flex; gap: 10px; }
.btn-mitad { flex: 1; margin-top: 0; }

/* ---------- Navegación inferior ---------- */
.nav-inferior {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  background: var(--papel); border-top: 1px solid var(--papel-suave);
  display: flex; justify-content: space-around; align-items: center;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  z-index: 10;
}
.nav-btn {
  background: none; border: none; display: flex; flex-direction: column; align-items: center;
  gap: 3px; color: #8a8060; font-size: 9.5px; font-family: var(--cuerpo); cursor: pointer;
  padding: 4px 8px;
}
.nav-btn.activo { color: var(--sello); }
.nav-icono { width: 21px; height: 21px; display: flex; }
.nav-icono svg { width: 100%; height: 100%; }
.nav-btn-central {
  background: var(--sello); color: #fff; width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  margin-top: -26px; box-shadow: 0 4px 12px rgba(178,58,46,0.4); border: 3px solid var(--papel);
}

.oculto { display: none !important; }

.toast-instalar {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 32px); max-width: 440px; z-index: 200;
  background: linear-gradient(135deg, #4C7A6F, #3a5f56);
  color: #fff; border-radius: 14px; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
  animation: deslizarEntrada 0.4s ease;
}
.toast-icono { width: 24px; height: 24px; flex-shrink: 0; }
.toast-icono svg { width: 100%; height: 100%; }
.toast-texto { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.toast-texto strong { font-size: 13.5px; }
.toast-texto span { font-size: 12px; opacity: 0.9; }
.toast-cerrar { background: none; border: none; color: #fff; font-size: 14px; cursor: pointer; opacity: 0.8; flex-shrink: 0; }

@keyframes deslizarEntrada {
  from { opacity: 0; transform: translate(-50%, -20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.cargando { text-align: center; padding: 40px; color: var(--texto-tenue); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}