/* Portal de clientes Fazt Consulting · sobre tokens.css + styles.css del sitio.
   Rediseño 1 nov 2026: formularios en tarjetas, pestañas claras, controles
   con foco visible y selector de archivo propio (el nativo de Safari salía
   en inglés y sin estilo). Solo cambia presentación: mismos IDs y clases. */
.portal-wrap { max-width: 960px; margin: 0 auto; padding: 28px 20px 64px; }
.portal-wrap h1 { font-family: "Fraunces", serif; font-size: 2rem; line-height: 1.1; margin: 8px 0 4px; }
.portal-sub { color: var(--c-ink-2); margin: 0 0 28px; }

/* Pestañas: píldoras grandes, activa en Pino con sombra suave */
.tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 28px; border-bottom: 1px solid var(--c-line); padding-bottom: 14px; }
.tab-btn { border: 1px solid var(--c-line-strong); background: var(--c-surface); color: var(--c-ink); border-radius: 999px; padding: 10px 18px; cursor: pointer; font: inherit; font-weight: 600; transition: border-color .15s, box-shadow .15s; }
.tab-btn:hover { border-color: var(--c-accent); }
.tab-btn.active { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.tab-btn.hidden { display: none; }
.p-section.hidden { display: none; }
.p-section h2 { font-family: "Fraunces", serif; font-size: 1.45rem; line-height: 1.2; margin: 0 0 16px; }

/* Tarjetas de contenido */
.cards { display: grid; gap: 16px; }
.p-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 14px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); }
.p-card h3 { margin: 0 0 6px; font-size: 1.1rem; }
.p-card p { margin: 4px 0; color: var(--c-ink-2); }
.p-card p strong { color: var(--c-ink); }
.badge { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 0.85rem; background: var(--c-accent-soft); color: var(--c-accent); }
.badge.warn { background: #F7E8C9; color: var(--c-warning); }
.badge.err { background: #F6DDD9; color: var(--c-error); }
.badge.ok { background: var(--c-accent-soft); color: var(--c-accent); }

/* Formularios: cada uno es una tarjeta, campos con aire y foco visible */
.p-form { display: grid; gap: 16px; margin: 16px 0; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 16px; padding: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); }
.p-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.p-field input, .p-field select, .p-field textarea { width: 100%; font: inherit; color: var(--c-ink); background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: 10px; padding: 12px 14px; transition: border-color .15s, box-shadow .15s; }
.p-field input:focus, .p-field select:focus, .p-field textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.p-field textarea { min-height: 140px; resize: vertical; }
.p-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2313212B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }

/* Selector de archivo propio: botón Pino + nombre en español (el nativo
   de Safari mostraba "Choose File / no file selected" sin estilo) */
.p-file { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.p-file input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.p-file-btn { display: inline-block; border: 1px solid var(--c-accent); color: var(--c-accent); background: transparent; border-radius: 999px; padding: 10px 18px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.p-file-btn:hover { background: var(--c-accent); color: var(--c-on-accent); }
.p-file-name { color: var(--c-ink-2); }

.p-error { background: #F6DDD9; color: var(--c-error); border-radius: 10px; padding: 10px 14px; }
.p-error:empty { display: none; }
.p-ok { background: var(--c-accent-soft); color: var(--c-accent); border-radius: 10px; padding: 10px 14px; }
.p-ok:empty { display: none; }
.p-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.p-row .btn { cursor: pointer; padding: 12px 24px; font-weight: 600; }
.p-empty { color: var(--c-ink-2); padding: 12px 0; }
.p-meta { font-size: 0.9rem; color: var(--c-ink-2); }
.p-detail { border-top: 1px solid var(--c-line); margin-top: 12px; padding-top: 12px; }
.p-detail.hidden { display: none; }
@media (max-width: 600px) {
  .portal-wrap h1 { font-size: 1.6rem; }
  .portal-wrap { padding: 20px 16px 56px; }
  .tab-btn { padding: 10px 14px; }
  .p-form { padding: 16px; }
  .p-row .btn { width: 100%; text-align: center; }
}

/* Encabezado en pantallas angostas: logo + idioma + botón deben caber sin cortarse. */
@media (max-width: 480px) {
  .site-header .brand img { width: 128px; }
  .site-header .header-row, .site-header .header-actions { gap: 8px; }
  .site-header .btn-sm { padding: 8px 14px; white-space: nowrap; }
}
@media (max-width: 380px) {
  .site-header .brand img { width: 108px; }
  .site-header .btn-sm { padding: 8px 12px; font-size: 0.8125rem; }
  .site-header .lang-opt { padding: 0 8px; }
}
@media (max-width: 340px) {
  .site-header .brand img { width: 92px; }
  .site-header .header-row, .site-header .header-actions { gap: 6px; }
  .site-header .btn-sm { padding: 8px 10px; font-size: 0.78rem; }
  .site-header .lang-opt { padding: 0 7px; }
}
/* Lista de documentos requeridos del trámite (rediseño del portal):
   renglón con nombre, estado y acción. Solo presentación. */
.p-check { list-style: none; margin: 12px 0 20px; padding: 0; display: grid; gap: 8px; }
.p-check li { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 10px; padding: 10px 12px; }
.p-check li .p-check-name { flex: 1 1 220px; color: var(--c-ink); }
.p-check li .btn { padding: 8px 16px; }

/* Respiro entre el título de la página y el primer subtítulo del panel de administrador. */
#adminDash > h2 { margin: 36px 0 12px; }
#adminDash > h2:first-child { margin-top: 16px; }