/* TRADI ARTE: identidad cálida, jerarquía legible y acciones táctiles. */
:root { --color-surface:#fffcf7; --color-bg:#f7f1e6; --color-border:#e4dac8; --color-text-muted:#625e55; --nav-width:272px; --bottom-nav-height:78px; --radius-md:16px; }
body { font-size:16px; line-height:1.55; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button:disabled { opacity:.52; cursor:not-allowed; transform:none!important; }
h1 { font-size:clamp(29px,3vw,38px); line-height:1.2; letter-spacing:-.035em; margin-bottom:24px; }
h2 { font-size:23px; line-height:1.3; }
h3,.modal h3 { font-size:25px; line-height:1.3; }
p { line-height:1.65; }
.sidebar { padding:16px 16px 24px; background:#173A5E; height:100dvh; }
.brand { display:block; text-align:center; padding:0 0 16px; margin-bottom:8px; border:0; }
.brand-logo { width:174px; height:174px; object-fit:contain; display:block; margin:-12px auto -5px; filter:invert(1) sepia(1) saturate(3); mix-blend-mode:screen; }
.brand-sub { font-size:11px; letter-spacing:.12em; color:#d3dfe8; }
.brand::after { content:''; display:block; height:12px; margin-top:18px; background:url('/img/textile.svg') repeat-x center/80px 12px; opacity:.65; }
.nav-group-label { font-size:11px; padding-top:20px; color:#bccddd; }
.nav-btn { min-height:46px; font-size:15px; padding:10px 12px; border-radius:11px; gap:12px; }
.nav-list { gap:3px; }
.nav-btn:hover { padding-left:12px; }
.nav-btn.active { background:#f2cd74; box-shadow:none; }
.nav-btn .icon { width:20px; height:20px; }
.user-chip .name { font-size:15px; }.user-chip .role { font-size:12px; }
.logout-btn { font-size:14px; min-height:44px; }
.content { min-width:0; max-width:1560px; padding:40px clamp(22px,3.5vw,58px) 70px; }
.content::before { content:''; display:block; height:5px; width:66px; background:var(--ta-yellow); border-radius:6px; margin-bottom:25px; }
.view-header { gap:16px; margin-bottom:24px; }.view-header h1 { margin-bottom:0; }
.panel { padding:26px; box-shadow:0 4px 20px #332a1805; margin-bottom:24px; }
.cards { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; }
.card { padding:23px; }.card:hover { transform:none; }
.card .label { font-size:14px; }.card .value { font-size:31px; font-variant-numeric:tabular-nums; }
.card-icon { width:40px; height:40px; }.card-icon svg { width:21px;height:21px; }
th { font-size:12px; letter-spacing:.025em; text-transform:none; }td { font-size:15px; }th,td { padding:15px 18px; }
thead tr { background:#eee7da; }.table-wrap { border:1px solid var(--color-border); }table { border:0; }
.badge { font-size:13px; padding:5px 11px; }
.btn-primary,.btn-secondary,.btn-link { min-height:46px; font-size:15px; gap:8px; text-decoration:none; }
.btn-primary { background:#E5AC24; box-shadow:none; }.btn-primary:hover { background:#f0bf4f; box-shadow:none; }
.btn-secondary { background:#fffcf7; }.btn-link { padding:9px 10px; }
.filters { padding:20px; background:#efe7d7; border:1px solid var(--color-border); border-radius:16px; gap:16px; margin:24px 0; }
.filters label,.form-row label { font-size:14px; font-weight:600; }
.filters input,.filters select,.form-row input,.form-row select,.form-row textarea { min-height:48px; font-size:16px; padding:11px 13px; background:#fffcf7; color:var(--ta-carbon); min-width:0; max-width:100%; }
.form-row { gap:7px; margin-bottom:18px; }.form-row-2 .form-row { min-width:0; }
.empty-msg,.form-error,.checkbox-item { font-size:15px; }
.empty-msg { padding:28px 16px; }.form-error { line-height:1.5; }
.modal { width:580px; padding:30px; border:1px solid #e4dac8; max-height:90dvh; }
.modal-actions { gap:12px; }.modal-actions button { flex:1; }
:focus-visible { outline:3px solid #986910; outline-offset:3px; }
.sidebar :focus-visible { outline-color:#f2cd74; }
.login-page { background:radial-gradient(ellipse at 20% 15%,#e6d7b8 0,transparent 60%),#f3e9d6; }
.login-card { width:460px; padding:36px 40px; box-shadow:0 20px 70px #173a5e16; border-top:5px solid var(--ta-yellow); }
.login-brand { margin-bottom:24px; gap:0; }
.login-logo { width:200px; height:200px; object-fit:contain; mix-blend-mode:multiply; margin:-24px 0 -4px; }
.login-brand h1 { font-family:var(--font-sans); font-size:23px; letter-spacing:-.03em; }
.login-brand p { font-size:14px; text-transform:none; letter-spacing:0; margin-top:8px; }
.login-card::after { content:''; display:block; height:12px; background:url('/img/textile.svg') repeat-x center/80px 12px; opacity:.5; margin-top:26px; }
.mobile-brand { display:none; }
.welcome { position:relative; overflow:hidden; padding:30px; border-radius:20px; background:#173A5E; color:#fffcf7; margin-bottom:26px; }
.welcome::after { content:''; position:absolute; bottom:0; left:0; right:0; height:12px; background:url('/img/textile.svg') repeat-x center/80px 12px; opacity:.6; }
.welcome .eyebrow { color:#f2cd74; font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 10px; }
.welcome h1 { margin-bottom:10px; font-size:34px; }.welcome p { margin:0; color:#d6e1ea; font-size:16px; }
.quick-actions { display:flex; gap:12px; flex-wrap:wrap; margin:24px 0; }.quick-actions a,.quick-actions button { flex:1; min-width:160px; }
.menu-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.menu-tile { display:flex; align-items:center; gap:14px; min-height:82px; background:var(--color-surface); padding:18px; border:1px solid var(--color-border); border-radius:14px; text-decoration:none; font-weight:600; }
.menu-tile svg { color:var(--ta-navy); }.menu-tile:hover { border-color:#bf9022; background:#fff8e8; }
.page-intro { color:var(--color-text-muted); margin:-6px 0 22px; max-width:760px; font-size:16px; }
.toast-region { position:fixed; right:24px; bottom:24px; z-index:500; max-width:420px; }
.toast { background:#173A5E; color:#fff; padding:16px 22px; border-radius:14px; box-shadow:0 10px 36px #11182030; margin-top:8px; }
.att-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:20px 0; }
.att-student { display:grid; grid-template-columns:minmax(160px,1fr) auto; gap:18px; align-items:center; padding:20px 0; border-bottom:1px solid var(--color-border); }
.att-student:last-child { border:0; }.att-name { font-size:17px; font-weight:700; }.att-status { color:var(--color-text-muted); font-size:13px; display:block; }
.att-options { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }.att-options button { min-width:94px; min-height:48px; font-size:14px; }
.att-options button[aria-pressed="true"] { background:#315743; color:#fff; border-color:#315743; box-shadow:inset 0 0 0 1px #315743; }
.att-options button[data-estado="ausente"][aria-pressed="true"] { background:#A5372B; border-color:#A5372B; }
.att-options button[data-estado="tarde"][aria-pressed="true"] { background:#845600; border-color:#845600; }
.att-options button[data-estado="justificado"][aria-pressed="true"] { background:#173A5E; border-color:#173A5E; }
.save-status { font-size:14px; color:var(--ta-green); }.save-status.error { color:var(--color-danger); }
.class-card { display:grid; grid-template-columns:100px 1fr auto; align-items:center; gap:22px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:16px; padding:22px; margin-bottom:14px; }
.class-time { font-size:23px; font-weight:700; color:var(--ta-navy); }.class-time small { display:block; font-size:14px; font-weight:400; }.class-card h2 { margin:0 0 6px; font-family:var(--font-sans); font-size:20px; }.class-card p { margin:0; font-size:14px;color:var(--color-text-muted); }
.bottom-nav-list>li { flex:1; display:flex; }.bottom-nav-item { width:100%;font-size:12px; min-height:60px; }
@media(max-width:1100px) { .att-student { grid-template-columns:1fr; }.att-options button { min-width:0; } }
@media(max-width:860px) {
 .mobile-brand { display:flex; align-items:center; gap:10px; position:absolute; top:0;left:0;right:0; height:72px; padding:10px 20px; background:#173A5E; color:#f3e9d6; text-decoration:none; font-family:var(--font-display);font-size:22px; }
 .mobile-brand img { width:48px;height:48px; object-fit:cover; filter:invert(1) sepia(1) saturate(3);mix-blend-mode:screen; }.mobile-brand small { font:11px var(--font-sans); margin-left:auto; color:#ead9ab; }
 .content { padding:96px 18px calc(110px + env(safe-area-inset-bottom)); width:100%; }.content::before { display:none; }
 h1 { font-size:29px; }h2 { font-size:22px; }.panel { padding:20px; }.welcome { padding:24px 22px 30px; }.welcome h1 { font-size:29px; }
 .cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.card { padding:16px; }.card .value { font-size:25px; }.card .label { font-size:13px; }
 .filters { padding:16px; gap:12px; }.filters label { flex:1 1 130px; min-width:0; }.filters input,.filters select { width:100%; }
 td { font-size:15px; overflow-wrap:anywhere; }tbody td::before {font-size:12px; text-transform:none;flex-shrink:0; }
 .table-wrap { border:0; }table { background:transparent; }tbody tr { background:var(--color-surface);padding:10px; }
 .btn-primary,.btn-secondary { width:auto; }.view-header>.btn-primary,.view-header>.btn-secondary { width:100%; }
 .quick-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }.quick-actions a,.quick-actions button { min-width:0;font-size:14px; }
 .menu-grid { grid-template-columns:1fr; }.form-row-2 { flex-direction:column;gap:0; }.modal { padding:24px 20px; }.modal-actions { flex-wrap:wrap; }
 .bottom-nav { height:calc(78px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#173A5E; }.bottom-nav-item.active { background:#ffffff0d;box-shadow:inset 0 3px #e5ac24; }
 .toast-region { left:18px;right:18px;bottom:calc(94px + env(safe-area-inset-bottom)); }.att-options { grid-template-columns:repeat(2,minmax(0,1fr)); }.att-options button { width:100%; }.att-student { gap:12px; }
 .class-card { grid-template-columns:72px 1fr;gap:14px;padding:18px; }.class-card>a { grid-column:1/-1; }.class-time { font-size:20px; }
 .login-card { padding:30px 24px; }.login-logo { width:180px;height:180px; }
}
@media print {
 .mobile-brand,.quick-actions,.toast-region,.content::before,.welcome,.filters,button { display:none!important; }
 .content { padding:0;width:100%;max-width:none; }.panel { padding:10px;box-shadow:none; }
 table { display:table; }thead { display:table-header-group; }tbody { display:table-row-group; }tr,tbody tr { display:table-row; }th,td,tbody td { display:table-cell;white-space:normal;padding:8px;font-size:11px; }tbody td::before { display:none; }
}

.brand { text-decoration:none; }
[hidden] { display:none!important; }
input[readonly] { background:#eee7da; color:#514a3f; }
@media(min-width:1100px) { #dashboard-cards { grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* Legibilidad en vistas anteriores que aún usan tamaños inline. */
.content [style*="font-size:13px"],.content [style*="font-size: 13px"],.content [style*="font-size:12px"],.content [style*="font-size: 12px"] { font-size:15px!important; }
.print-brand { display:none; }
@media print {
 .print-brand { display:flex;align-items:center;gap:16px;border-bottom:2px solid #173A5E;padding-bottom:10px;margin-bottom:20px;font:16px Georgia,serif; }
 .print-brand img { width:68px;height:68px;object-fit:contain; }
}

/* Navegación compacta y carga visible sin bloquear la pantalla. */
.sidebar .brand-logo { width:106px; height:106px; margin:-8px auto 0; }
.sidebar .brand { padding-bottom:4px; margin-bottom:0; }
.sidebar .brand::after { margin-top:10px; }
.sidebar .nav-group-label { padding:14px 12px 6px; list-style:none; }
.sidebar .nav-btn { min-height:42px; padding:8px 12px; font-size:14px; }
.sidebar { --icon-surface:#173a5e; }
.sidebar .nav-btn.active { --icon-surface:#f2cd74; }
.boot-status { min-height:85vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--ta-navy); }
.loading-state { display:flex; align-items:center; gap:12px; padding:28px 0; color:var(--color-text-muted); }
.loading-dot { display:inline-block; width:22px; height:22px; border:3px solid #e4dac8; border-top-color:#986910; border-radius:50%; animation:loading-spin .8s linear infinite; }
@keyframes loading-spin { to { transform:rotate(360deg); } }
.menu-search { display:flex; align-items:center; gap:12px; max-width:560px; border:1px solid var(--color-border); border-radius:12px; background:var(--color-surface); padding:0 16px; margin-bottom:28px; }
.menu-search input { width:100%; border:0; background:transparent; padding:14px 0; min-width:0; }
.menu-section { margin:28px 0; }
.menu-section h2 { font-family:var(--font-sans); font-size:16px; margin-bottom:14px; }
.menu-tile { min-height:74px; font-size:15px; padding:14px; color:var(--ta-navy); }
.menu-tile-icon { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:42px; height:42px; border-radius:12px; background:#efe7d7; --icon-surface:#efe7d7; }
.menu-arrow { margin-left:auto; flex-shrink:0; opacity:.55; }
.settings-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.settings-card { display:flex; align-items:center; gap:16px; padding:24px; border:1px solid var(--color-border); border-radius:16px; background:var(--color-surface); text-decoration:none; color:var(--ta-navy); }
.settings-card h2 { font:700 17px var(--font-sans); margin:0 0 6px; }
.settings-card p { margin:0; font-size:14px; color:var(--color-text-muted); }
.settings-card>svg { margin-left:auto; flex-shrink:0; }
.settings-card:hover { border-color:#986910; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media(max-width:400px) { .settings-grid { grid-template-columns:1fr; } .settings-card { padding:18px; } }

.student-code { display:inline-block; vertical-align:middle; margin-left:8px; padding:3px 10px; border-radius:999px; background:#efe7d7; color:var(--ta-navy); font:700 13px var(--font-sans); letter-spacing:.04em; }
.notice { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; margin:0 0 18px; border-radius:12px; border:1px solid var(--color-border); background:var(--color-surface); }
.notice.warning { background:var(--color-warning-bg); border-color:#e6cb9a; color:#6b4708; }
.notice svg { flex-shrink:0; margin-top:2px; }
.form-static { padding:11px 0; color:var(--color-text-muted); }
.hint { color:var(--color-text-muted); font-size:14px; }
.form-row:has(:required) > label::after { content:" *"; color:var(--color-danger); }
.form-row input:user-invalid,.form-row select:user-invalid { border-color:var(--color-danger); }
button:disabled { opacity:.6; cursor:not-allowed; }
.filters .checkbox-item { flex-direction:row; align-items:center; gap:10px; align-self:flex-end; min-height:48px; font-weight:600; }
.filters .checkbox-item input { width:20px; min-height:20px; height:20px; flex-shrink:0; }

/* Cobros por grupo */
.group-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; margin-top:14px; }
.group-card { display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid var(--color-border); border-radius:14px; background:var(--color-surface); color:var(--color-text); text-decoration:none; min-width:0; }
.group-card.owes { border-left:5px solid var(--color-warning); }.group-card.ok { border-left:5px solid var(--color-success); }
.group-card-head { display:flex; flex-direction:column; }.group-card-head span { font-size:13px; color:var(--color-text-muted); }
.progress { height:8px; border-radius:99px; background:#eadfc8; overflow:hidden; }.progress span { display:block; height:100%; background:var(--color-success); }
.group-card-stats { display:flex; justify-content:space-between; font-size:14px; color:var(--color-text-muted); }.group-card-stats .debt { color:var(--color-danger); font-weight:700; }
.group-card-money { font:700 18px var(--font-sans); }.group-card-money.muted { font-size:14px; font-weight:500; color:var(--color-text-muted); }
.group-card-cta { display:inline-flex; align-items:center; gap:4px; font-size:14px; font-weight:700; color:#986910; margin-top:auto; }
.group-card:hover { border-color:#986910; }

/* Celular: campos de fecha y mes dentro de su caja, filtros alineados */
input[type="date"],input[type="month"],input[type="time"] { -webkit-appearance:none; appearance:none; display:block; width:100%; min-width:0; max-width:100%; box-sizing:border-box; text-align:left; line-height:1.3; }
input[type="date"]::-webkit-date-and-time-value,input[type="month"]::-webkit-date-and-time-value { text-align:left; min-height:1.3em; }
.filters { align-items:flex-start; }.filters label { min-width:0; }
.filters > label { flex:1 1 170px; }
@media(max-width:700px) { .filters > label { flex:1 1 100%; } .filters .btn-secondary { width:100%; } }
.group-card,.card,.panel { min-width:0; overflow-wrap:anywhere; }
/* Impresión: el encabezado de la tabla se repite en cada hoja */
@media print {
 .table-wrap { overflow:visible!important; border:0!important; box-shadow:none!important; background:none!important; }
 table { width:100%; border-collapse:collapse; }
 thead { display:table-header-group!important; }
 tr { break-inside:avoid; page-break-inside:avoid; }
 th { background:#eee7da!important; color:#173A5E!important; border-bottom:2px solid #173A5E; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
 td { border-bottom:1px solid #cfc6b4; }
 .sidebar,.bottom-nav,.group-cards { display:none!important; }
}
@media(max-width:700px) {
 .group-cards { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:78%; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; margin-right:-6px; }
 .group-card { scroll-snap-align:start; }
}
/* Roles y permisos */
fieldset.permission-module { border:1px solid var(--color-border); border-radius:14px; padding:14px 16px 6px; margin:0 0 16px; min-width:0; }
fieldset.permission-module legend { font:700 17px var(--font-sans); padding:0 8px; color:var(--ta-navy); }
fieldset.permission-module .hint { margin:0 0 10px; }
.permission-item { display:flex; align-items:flex-start; gap:12px; padding:10px 12px; border-radius:10px; border:1px solid transparent; min-height:48px; }
.permission-item:hover { background:#f6efdf; }
.permission-item input { width:22px; height:22px; flex-shrink:0; margin-top:2px; }
.permission-item span { display:flex; flex-direction:column; gap:2px; }
.permission-item small { color:var(--color-text-muted); font-size:14px; }
/* Ayuda */
.help-topic { border:1px solid var(--color-border); border-radius:14px; background:var(--color-surface); margin:0 0 12px; }
.help-topic summary { display:flex; align-items:center; gap:12px; padding:16px; min-height:56px; cursor:pointer; font-weight:700; list-style:none; }
.help-topic summary::-webkit-details-marker { display:none; }
.help-icon { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:#efe7d7; flex-shrink:0; color:var(--ta-navy); }
.help-chevron { margin-left:auto; flex-shrink:0; transition:transform .2s; }
.help-topic[open] .help-chevron { transform:rotate(180deg); }
.help-topic ol { margin:0; padding:0 20px 16px 44px; display:grid; gap:10px; }
.help-topic .notice { margin:0 16px 16px; }
.role-guide dt { font-weight:700; margin-top:12px; color:var(--ta-navy); }.role-guide dd { margin:2px 0 0; color:var(--color-text-muted); }
.perm-list { margin:0; padding-left:20px; display:grid; gap:8px; }
fieldset.permission-module .checkbox-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr)); gap:6px; }
fieldset.permission-module legend { color:var(--ta-navy); }