/* Los paneles del área de cuenta. Fichero aparte de app.css a propósito: los ocho paneles
   se escribieron a la vez y compartir un solo fichero de estilos habría sido una pelea
   constante por las mismas líneas. Aquí solo viven las piezas comunes; ningún panel
   añade estilos propios, para que los ocho se lean como la misma pantalla. */

.ajuste-cabecera { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 4px 16px; align-items: center; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ajuste-volver { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-strong); color: var(--ink-soft); font-size: 15px; }
.ajuste-volver:hover { border-color: var(--scope); color: var(--scope-deep); }
.ajuste-cabecera h2 { align-self: end; margin: 0; font-size: 22px; letter-spacing: -.02em; }
.ajuste-cabecera p { align-self: start; margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }

.ajuste-cuerpo { display: grid; gap: 13px; }
.ajuste-bloque { padding: 19px 21px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-strong); }
.ajuste-bloque > h3 { margin: 0; font-size: 14px; letter-spacing: -.01em; }
.ajuste-bloque > h3 + p { margin: 5px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.ajuste-bloque > h3 + p:last-child, .ajuste-bloque > h3:last-child { margin-bottom: 0; }
.ajuste-bloque > *:nth-child(n+2):not(p) { margin-top: 15px; }

.ajuste-filas { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); overflow: hidden; }
.ajuste-fila { display: grid; grid-template-columns: minmax(120px,.55fr) minmax(0,1fr) auto; gap: 8px 16px; align-items: center; padding: 12px 14px; background: var(--surface-strong); }
.ajuste-fila > b { color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.ajuste-fila > span { min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.ajuste-fila > small { grid-column: 2 / -1; margin-top: -4px; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.ajuste-fila > .ajuste-marca { justify-self: end; }

.ajuste-marca { padding: 4px 9px; border-radius: 99px; background: var(--surface-muted); color: var(--ink-soft); font-size: 10px; font-style: normal; font-weight: 750; white-space: nowrap; }
.ajuste-marca[data-tono="bien"] { background: var(--personal-soft); color: var(--personal); }
.ajuste-marca[data-tono="atencion"] { background: var(--scope-soft); color: var(--scope-deep); }

.ajuste-campo { display: grid; gap: 6px; }
.ajuste-campo > label { color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.ajuste-campo > small { color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.ajuste-campo input, .ajuste-campo select, .ajuste-campo textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-strong); color: var(--ink); font-size: 13px; }
.ajuste-campo input:disabled, .ajuste-campo select:disabled { background: var(--surface-muted); color: var(--ink-soft); }

.ajuste-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.ajuste-opciones button { padding: 9px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface-strong); color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.ajuste-opciones button[aria-pressed="true"] { border-color: var(--scope); background: var(--scope-soft); color: var(--scope-deep); }

.ajuste-conmutador { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.ajuste-conmutador:last-child { border-bottom: 0; padding-bottom: 0; }
.ajuste-conmutador > div { min-width: 0; }
.ajuste-conmutador strong { display: block; font-size: 13px; }
.ajuste-conmutador small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.ajuste-conmutador input[type="checkbox"] { flex: none; width: 40px; height: 23px; margin: 0; appearance: none; border-radius: 99px; background: var(--surface-muted); border: 1px solid var(--line); position: relative; transition: background var(--ease), border-color var(--ease); }
.ajuste-conmutador input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--surface-strong); box-shadow: 0 1px 3px rgb(31 38 31 / 22%); transition: transform var(--ease); }
.ajuste-conmutador input[type="checkbox"]:checked { border-color: var(--scope); background: var(--scope); }
.ajuste-conmutador input[type="checkbox"]:checked::after { transform: translateX(17px); }
.ajuste-conmutador input[type="checkbox"]:disabled { opacity: .5; }

.ajuste-lista { display: grid; gap: 9px; }
.ajuste-elemento { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 14px; align-items: center; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ajuste-elemento strong { font-size: 13px; }
.ajuste-elemento small { grid-column: 1; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }

.ajuste-nota { display: grid; gap: 4px; padding: 13px 15px; border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--ink-soft); font-size: 11px; line-height: 1.6; }
.ajuste-nota strong { color: var(--ink); font-size: 12px; }
.ajuste-nota[data-tono="pendiente"] { background: var(--scope-wash); }

.ajuste-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.ajuste-acciones > small { flex: 1; min-width: 140px; color: var(--ink-soft); font-size: 11px; }
.ajuste-acciones button:disabled { opacity: .55; }

/* Los enlaces que hacen de botón: los dos documentos legales se abren en su página, así que son
   anclas de verdad y no botones. `.secondary-button` vive en app.css pensada para <button> y no
   dice nada del subrayado ni del color, así que un ancla salía azul y subrayada al lado de un
   botón gris. */
.ajuste-acciones a.secondary-button, .ajuste-bloque a.secondary-button { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); text-decoration: none; }
.ajuste-acciones a.secondary-button:hover, .ajuste-bloque a.secondary-button:hover { border-color: var(--scope); color: var(--scope-deep); }

/* El tamaño del texto de «Idioma y apariencia». Se escala con zoom y no con el font-size de la
   raíz porque toda la hoja mide en píxeles: cambiar el font-size de :root no movería nada. Migrar
   la hoja entera a rem sería lo limpio, pero es otra tarea y mucho más grande que esta. */
:root[data-tamano-de-texto="pequeno"] { zoom: .92; }
:root[data-tamano-de-texto="grande"] { zoom: 1.12; }

@media (max-width: 720px) {
  .ajuste-fila { grid-template-columns: minmax(0,1fr); }
  .ajuste-fila > .ajuste-marca { justify-self: start; }
  .ajuste-fila > small { grid-column: 1; }
}