/* Shomer Alef — azul #252850, dorado #D0AA65 */
:root {
  --sf-azul: #252850; --sf-dorado: #D0AA65; --sf-fondo: #f5f6fa; --sf-panel: #fff; --sf-texto: #1d1f33;
  --sf-suave: #6b6f86; --sf-borde: #dfe1ea; --sf-ok: #1f7a4d; --sf-error: #b3261e; --sf-ambar: #a86200;
}
@media (prefers-color-scheme: dark) {
  :root { --sf-fondo: #14152a; --sf-panel: #1e2040; --sf-texto: #eceefa; --sf-suave: #a6a9c4; --sf-borde: #33365c; --sf-ok: #5fd39a; --sf-error: #ff8a80; --sf-ambar: #ffb74d; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--sf-fondo); color: var(--sf-texto); }
a { color: inherit; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; } h1 small { color: var(--sf-suave); font-weight: 500; }
h1:focus { outline: none; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; } h3 { font-size: 1rem; margin: 1rem 0 .5rem; }

/* Entrada */
.sf-entrada { display: grid; place-items: center; min-height: 100vh; background: var(--sf-azul); }
.sf-caja { background: var(--sf-panel); width: min(420px, 92vw); padding: 2rem; border-radius: 12px; border-top: 5px solid var(--sf-dorado); }
.sf-caja h1 { color: var(--sf-texto); }

/* Marco */
.sf-app { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.sf-lateral { background: var(--sf-azul); color: #fff; display: flex; flex-direction: column; padding: 1rem; gap: 1rem; }
.sf-marca { font-weight: 700; font-size: 1.05rem; border-bottom: 2px solid var(--sf-dorado); padding-bottom: .75rem; }
.sf-marca small, .sf-usuario small { display: block; font-weight: 400; opacity: .75; font-size: .8rem; }
.sf-lateral nav { display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.sf-lateral nav a { text-decoration: none; padding: .5rem .75rem; border-radius: 6px; }
.sf-lateral nav a:hover, .sf-lateral nav a.sf-activo { background: rgba(208,170,101,.22); color: var(--sf-dorado); }
.sf-usuario { font-size: .9rem; } .sf-usuario form { margin-top: .5rem; }
.sf-contenido { padding: 1.5rem 2rem; max-width: 1200px; }
@media (max-width: 760px) { .sf-app { grid-template-columns: 1fr; } .sf-lateral nav { flex-direction: row; flex-wrap: wrap; } .sf-contenido { padding: 1rem; } }

/* Piezas */
.sf-encabezado { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.sf-panel { background: var(--sf-panel); border: 1px solid var(--sf-borde); border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1rem; overflow-x: auto; }
.sf-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.sf-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.sf-tarjeta { background: var(--sf-panel); border: 1px solid var(--sf-borde); border-left: 4px solid var(--sf-dorado); border-radius: 8px; padding: 1rem; }
.sf-tarjeta strong { display: block; font-size: 1.8rem; } .sf-tarjeta span { color: var(--sf-suave); }
.sf-datos { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 1rem; }
.sf-datos dt { color: var(--sf-suave); } .sf-datos dd { margin: 0; }
.sf-vigencia { font-size: 1.15rem; }

.sf-tabla { width: 100%; border-collapse: collapse; background: var(--sf-panel); }
.sf-tabla th, .sf-tabla td { padding: .5rem .6rem; border-bottom: 1px solid var(--sf-borde); text-align: left; vertical-align: top; }
.sf-tabla th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--sf-suave); }
.sf-fila-clic { cursor: pointer; } .sf-fila-clic:hover { background: rgba(208,170,101,.12); }
.sf-inactivo { opacity: .55; }
.sf-acciones { display: flex; gap: .4rem; flex-wrap: wrap; } .sf-acciones form .sf-msg { margin: 0; font-size: .8rem; }

/* Formularios */
.sf-form label, .sf-filtro label { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .75rem; font-size: .9rem; }
.sf-form label.sf-check { flex-direction: row; align-items: center; gap: .5rem; }
input, select, textarea { font: inherit; padding: .5rem .6rem; border: 1px solid var(--sf-borde); border-radius: 6px; background: var(--sf-panel); color: var(--sf-texto); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--sf-dorado); outline-offset: 1px; }
.sf-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.sf-linea { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; } .sf-linea label { margin-bottom: 0; }
.sf-filtro { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; margin: 1rem 0; } .sf-filtro label { margin: 0; }
fieldset { border: 1px solid var(--sf-borde); border-radius: 8px; margin: 0 0 1rem; padding: .75rem 1rem; }
legend { font-weight: 600; padding: 0 .4rem; }
.sf-lista-checks { max-height: 260px; overflow: auto; border: 1px solid var(--sf-borde); border-radius: 6px; padding: .5rem; }
details { margin: .5rem 0; } summary { cursor: pointer; color: var(--sf-azul); font-weight: 600; }
@media (prefers-color-scheme: dark) { summary { color: var(--sf-dorado); } }

.sf-boton, .sf-btn-sec, .sf-btn-chico { font: inherit; cursor: pointer; border-radius: 6px; border: 1px solid var(--sf-azul); }
.sf-boton { background: var(--sf-azul); color: #fff; padding: .55rem 1.1rem; }
.sf-boton:hover { background: #31356a; }
.sf-btn-sec { background: transparent; color: inherit; padding: .5rem 1rem; border-color: var(--sf-dorado); }
.sf-btn-chico { background: transparent; color: inherit; padding: .2rem .55rem; font-size: .85rem; border-color: var(--sf-borde); }
button:disabled { opacity: .6; cursor: wait; }
.sf-lateral .sf-btn-sec { color: #fff; width: 100%; }

/* Estados y mensajes */
.sf-etiqueta { display: inline-block; font-size: .75rem; padding: .1rem .5rem; border-radius: 99px; background: var(--sf-borde); vertical-align: middle; font-weight: 600; }
.sf-etq-ok { background: rgba(31,122,77,.15); color: var(--sf-ok); }
.sf-etq-pend { background: rgba(168,98,0,.15); color: var(--sf-ambar); }
.sf-etq-off { background: rgba(179,38,30,.12); color: var(--sf-error); }
.sf-rojo { color: var(--sf-error); font-weight: 600; } .sf-ambar { color: var(--sf-ambar); font-weight: 600; }
.sf-nota { color: var(--sf-suave); font-size: .88rem; }
.sf-msg { min-height: 1.2em; margin: .5rem 0 0; font-size: .9rem; word-break: break-all; }
.sf-msg.sf-ok { color: var(--sf-ok); } .sf-msg.sf-error { color: var(--sf-error); }
.sf-aviso { padding: .75rem 1rem; border-radius: 8px; background: var(--sf-panel); border: 1px solid var(--sf-borde); }
.sf-aviso.sf-error { border-color: var(--sf-error); color: var(--sf-error); }
[aria-busy="true"] { opacity: .6; transition: opacity .2s; }