/* Factor de Cambio v5: sesión, completitud por colores, devocional, cuentagotas */
:root { --ok: #7cc79a; --mid: #eaa64c; --low: #e8675c; }

/* Encabezado con logo más grande */
.top-inner { height: 80px; }
.tabs a { padding: 29px 0 27px; }
.brand img { height: 48px; }
.brand .name { font-size: 22px; }
.me { position: relative; flex: none; }
.mebtn { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--hair-2); border-radius: 999px; padding: 4px 12px 4px 4px; cursor: pointer; font-size: 13.5px; }
.mebtn:hover { border-color: var(--paper); }
.av { width: 30px; height: 30px; border-radius: 50%; background: var(--paper); color: var(--ink); display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; letter-spacing: 0; }
.memenu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--ink-2); border: 1px solid var(--hair-2); border-radius: 16px; padding: 8px; min-width: 230px; display: grid; z-index: 40; box-shadow: 0 20px 50px rgba(0,0,0,.6); }
.memenu[hidden] { display: none; }
.memenu .who { padding: 10px 12px 12px; border-bottom: 1px solid var(--hair); margin-bottom: 6px; display: grid; gap: 2px; }
.memenu .who span { color: var(--stone); font-size: 12.5px; }
.memenu a, .memenu button { text-align: left; background: none; border: 0; padding: 10px 12px; border-radius: 10px; text-decoration: none; cursor: pointer; font-size: 14px; }
.memenu a:hover, .memenu button:hover { background: var(--ink-3); }
body.locked .top { display: none; }

/* Inicio de sesión */
.login { min-height: calc(100vh - 80px); display: grid; place-items: center; padding: 40px 0; }
.lcard { width: 100%; max-width: 420px; }
.lbrand { margin-bottom: 36px; }
.lbrand img { height: 64px; width: auto; }
.lbrand span { font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.lcard h1 { font-size: clamp(38px, 6vw, 56px); margin-bottom: 14px; }
.lcard .lede { margin-bottom: 28px; }
.lcard input[type=password], #pwForm input[type=password], .lcard input:not([type]), #newUser input:not([type]), #pwForm input:not([type]) { background: var(--ink); border: 1px solid var(--hair-2); border-radius: 12px; padding: 11px 14px; width: 100%; }
.lcard input:focus, #pwForm input:focus, #newUser input:focus { outline: none; border-color: var(--paper); }
.lerr { color: var(--low); font-size: 14px; min-height: 1.2em; margin: 4px 0 12px; }
main:has(.login) { padding-top: 0; }

/* Casillas: rojo vacío, verde completo */
.req[data-state=empty] { border-color: rgba(232, 103, 92, .55); }
.req[data-state=filled] { border-color: rgba(124, 199, 154, .55); }
.req:focus { outline: none; border-color: var(--paper) !important; }
.qa textarea.a.req { border-left: 2px solid transparent; padding-left: 12px; border-radius: 0; }
.qa textarea.a.req[data-state=empty] { border-left-color: rgba(232, 103, 92, .7); border-color: transparent; border-left-color: rgba(232, 103, 92, .7); }
.qa textarea.a.req[data-state=filled] { border-color: transparent; border-left-color: rgba(124, 199, 154, .7); }
.qa .a.fixed { border-left: 2px solid rgba(124, 199, 154, .7); padding-left: 12px; }
.dslot[data-state=empty] { border-color: rgba(232, 103, 92, .28); }
.dslot[data-state=filled] { border-color: rgba(124, 199, 154, .32); }
.dslot[data-state=filled] h3::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-left: 8px; vertical-align: middle; }
.req-box { outline-offset: 4px; }
.cover.req-box[data-state=empty] { box-shadow: inset 0 0 0 1px rgba(232, 103, 92, .55); }
#palEd.req-box[data-state=empty] .swatches { border: 1px dashed rgba(232, 103, 92, .55); border-radius: 14px; padding: 10px; }

/* Pestañas de la ficha con su avance */
.subtabs a { display: inline-flex; align-items: center; gap: 8px; }
.subtabs a i, .rcard .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--low); flex: none; }
.subtabs a small { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--low); }
.subtabs a.lv-mid i, .rcard .dots .lv-mid i { background: var(--mid); }
.subtabs a.lv-mid small { color: var(--mid); }
.subtabs a.lv-ok i, .rcard .dots .lv-ok i { background: var(--ok); }
.subtabs a.lv-ok small { color: var(--ok); }
.subtabs a.on small { color: var(--ink); opacity: .6; }
.rcard .dots { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--stone); }
.rcard .dots span { display: inline-flex; align-items: center; gap: 5px; }

/* Cuentas para etiquetar */
.tagbox { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hair); display: grid; gap: 10px; }
.tagbox .lbl { font-size: 13px; font-weight: 500; }
.tagbox[data-state=empty] .lbl::after { content: ' · falta cargar'; color: var(--low); font-weight: 400; }
.chips-acc { display: flex; flex-wrap: wrap; gap: 6px; }
.acc { display: inline-flex; align-items: center; gap: 4px; background: var(--ink-3); border: 1px solid var(--hair-2); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13px; }
.acc button { background: none; border: 0; color: var(--stone); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; }
.acc button:hover { color: var(--paper); }
.tagbox input { font-size: 13.5px; }
.dthumb.sq { aspect-ratio: 1; max-width: 200px; }
.dthumb.v { aspect-ratio: 9 / 16; max-width: 200px; }
.dthumb.h { aspect-ratio: 16 / 9; }

/* Cuentagotas sobre la portada */
.picker { position: relative; border-radius: 14px; overflow: hidden; line-height: 0; }
.picker canvas { width: 100%; height: auto; cursor: crosshair; display: block; touch-action: none; }
.loupe { position: absolute; left: 0; top: 0; pointer-events: none; display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.85); border: 1px solid var(--hair-2); border-radius: 999px; padding: 4px 10px 4px 4px; line-height: 1; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.loupe span { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--paper); }
.loupe[hidden] { display: none; }

/* Tipografías manuales */
.fontbox { border: 1px solid var(--hair); border-radius: 16px; padding: 16px; margin-bottom: 14px; display: grid; }
.fontbox .lbl { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.fontbox .field:last-of-type { margin-bottom: 8px; }
.fontbox .dlbtn { justify-self: start; }
.specimen .who.row { align-items: center; }
.fontlist .fl .row { align-items: center; }

/* Devocional */
.devday h3 { margin-bottom: 14px; }

/* Equipo */
.users { display: grid; }
.user { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
.user:last-child { border-bottom: 0; }
.user .ub { display: grid; flex: 1; min-width: 150px; }
.user .ub span { color: var(--stone); font-size: 13px; }
.user .uact { display: flex; gap: 4px; flex-wrap: wrap; }
.creds { background: var(--ink-3); border-radius: 12px; padding: 16px; font-size: 14px; white-space: pre-wrap; word-break: break-all; margin: 16px 0; font-family: ui-monospace, monospace; }

/* Historial */
.hlist { max-width: 760px; }
.hday { font-size: 13px; color: var(--stone); text-transform: uppercase; letter-spacing: .06em; margin: 32px 0 6px; }
.hday:first-child { margin-top: 0; }
.hentry { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.hentry .hb { flex: 1; min-width: 0; }
.hentry .hh { display: flex; gap: 10px; align-items: baseline; }
.hentry ul { margin: 6px 0 0; padding: 0 0 0 18px; color: rgba(244,244,244,.82); font-size: 14.5px; }
.hentry li { margin: 2px 0; }
.hw { color: var(--paper); }

@media (max-width: 760px) {
  .top-inner { height: auto; }
  .brand { width: auto; flex: 1; }
  .brand img { height: 40px; }
  .me { order: 2; }
  .tabs { order: 3; width: 100%; }
  .tabs a { padding: 12px 2px 11px; }
  .mebtn .mn { display: none; }
  .mebtn { padding: 3px; }
}
.specimen .dlbtn { color: inherit; border-color: currentColor; background: transparent; opacity: .85; }