/* =========================================================
   OLIMPIADA DE VIDEO-JUEGOS · PANEL DEL DOCENTE
   Libro de clase: papel, tinta y sellos de goma.
   ========================================================= */

:root{
  --sun:#FFDE59;
  --ink:#171528;
  --ink-2:#4D4A63;
  --paper:#FFFDF7;
  --paper-2:#F6F1E4;
  --cobalt:#2F4BFF;
  --coral:#FF5C5C;
  --mint:#5FE3B3;
  --violet:#C9B8FF;
  --line:rgba(23,21,40,.16);
}

*,
*::before,
*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  min-height:100vh;
  background:var(--paper-2);
  color:var(--ink);
  font-family:'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,p,ul{margin:0;}
ul{padding:0;list-style:none;}
a{color:var(--cobalt);}
button,input,select,textarea{font:inherit;color:inherit;}
code{font-family:ui-monospace, 'Cascadia Mono', 'Consolas', monospace;}

::selection{background:var(--ink);color:var(--sun);}

:focus-visible{
  outline:3px solid var(--cobalt);
  outline-offset:3px;
  border-radius:4px;
}

/* =========================================================
   INGRESO
   ========================================================= */

body.is-login{
  background-color:var(--sun);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 10v8M10 14h8' fill='none' stroke='%23171528' stroke-opacity='.08' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:28px 28px;
}

.login-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-height:100dvh;
  padding:clamp(16px,4vw,40px) 16px;
}

.back-link{
  align-self:center;
  color:var(--ink);
  font-size:.85rem;
  font-weight:700;
  text-decoration:none;
  padding:6px 2px;
}
.back-link:hover{text-decoration:underline;text-underline-offset:4px;}

.login-card{
  position:relative;
  width:min(470px,100%);
  padding:clamp(26px,5vw,40px) clamp(20px,4.6vw,38px) clamp(22px,4vw,32px);
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:24px;
  box-shadow:10px 10px 0 var(--ink);
  text-align:center;
}

.login-sticker{
  width:78px;
  margin:0 auto 14px;
  transform:rotate(-6deg);
  filter:drop-shadow(3px 4px 0 var(--ink));
}
.login-sticker svg{width:100%;height:auto;display:block;}

.eyebrow{
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-2);
}

.login-card h1{
  margin-top:6px;
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-size:clamp(2rem,6vw,2.7rem);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.03em;
}

.login-lede{
  max-width:36ch;
  margin:14px auto 0;
  font-size:.95rem;
  line-height:1.55;
  color:var(--ink-2);
}

.login-form{margin-top:24px;text-align:left;}
.login-cta{margin-top:22px;}

.login-foot{
  margin-top:20px;
  padding-top:16px;
  border-top:2px dashed var(--line);
  font-size:.85rem;
  color:var(--ink-2);
}
.login-foot a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--cobalt);}
.login-note{font-size:.76rem;font-weight:700;color:var(--ink-2);text-align:center;}

/* =========================================================
   CAMPOS
   ========================================================= */

.field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.field + .field{margin-top:0;}
.field-label{
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--ink);
}

.field input,
.field select,
.field textarea{
  width:100%;
  min-height:46px;
  padding:10px 12px;
  font-size:16px;
  background:#fff;
  border:2.5px solid var(--ink);
  border-radius:10px;
  transition:box-shadow .15s ease, background .15s ease;
}
.field textarea{
  min-height:160px;
  resize:vertical;
  line-height:1.55;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  box-shadow:0 0 0 4px rgba(47,75,255,.22);
  border-color:var(--cobalt);
}
.field input::placeholder,
.field textarea::placeholder{color:#8B8899;}

.field-hint{
  font-size:.78rem;
  line-height:1.45;
  color:var(--ink-2);
}

.password-row{
  position:relative;
  display:flex;
  align-items:stretch;
}
.password-row input{padding-right:74px;}
.btn-reveal{
  position:absolute;
  right:7px;
  top:50%;
  transform:translateY(-50%);
  min-height:32px;
  padding:0 11px;
  font-size:.76rem;
  font-weight:700;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:7px;
  cursor:pointer;
}
.btn-reveal:hover{background:var(--sun);}

.login-form .field{margin-bottom:16px;}

/* =========================================================
   BOTONES
   ========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:11px 20px;
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-size:.92rem;
  font-weight:700;
  line-height:1.15;
  text-align:center;
  text-decoration:none;
  border:2.5px solid var(--ink);
  border-radius:11px;
  cursor:pointer;
  transition:transform .13s ease, box-shadow .13s ease, background .13s ease;
  white-space:nowrap;
}
.btn--primary{
  background:var(--cobalt);
  color:var(--paper);
  box-shadow:4px 4px 0 var(--ink);
}
.btn--ink{
  background:var(--ink);
  color:var(--sun);
  box-shadow:4px 4px 0 var(--coral);
}
.btn--ghost{
  background:transparent;
  color:var(--ink);
  border-style:dashed;
}
.btn:hover{transform:translate(-1px,-1px);}
.btn--primary:hover{box-shadow:6px 6px 0 var(--ink);}
.btn--ink:hover{box-shadow:6px 6px 0 var(--coral);}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink);}
.btn--ghost:active{box-shadow:none;}
.btn--block{width:100%;}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}

/* =========================================================
   AVISOS
   ========================================================= */

.flash{
  position:relative;
  margin-top:22px;
  padding:14px 16px;
  border:2.5px solid var(--ink);
  border-radius:12px;
  text-align:left;
  font-size:.9rem;
  line-height:1.5;
  box-shadow:4px 4px 0 var(--ink);
}
.flash--ok{background:#CFF7E7;}
.flash--error{background:#FFD9D9;}
.flash--warn{background:#FFF2BF;}
.flash-message{font-weight:700;}
.flash-note{margin-top:8px;font-size:.83rem;color:var(--ink-2);}
.flash-details{margin-top:10px;padding-top:10px;border-top:2px dashed rgba(23,21,40,.25);}
.flash-details summary{
  cursor:pointer;
  font-weight:700;
  font-size:.85rem;
}
.flash-claves{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px,1fr));
  gap:6px 18px;
  margin-top:10px;
}
.flash-claves li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:5px 0;
  border-bottom:1px dotted rgba(23,21,40,.25);
  font-size:.85rem;
}
.flash-claves code{
  font-size:.9rem;
  font-weight:700;
  background:var(--paper);
  border:1.5px solid var(--ink);
  border-radius:5px;
  padding:1px 7px;
  white-space:nowrap;
}
.flash-hint{margin-top:10px;font-size:.76rem;color:var(--ink-2);}

/* =========================================================
   ESTRUCTURA DEL PANEL
   ========================================================= */

.shell{
  min-height:100vh;
  padding-bottom:30px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:14px clamp(16px,4vw,44px);
  background:var(--sun);
  border-bottom:3px solid var(--ink);
}

.brand{
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--ink);
  text-decoration:none;
  min-width:0;
}
.brand-mark{
  display:grid;
  place-items:center;
  flex:none;
  width:44px;
  height:44px;
  background:var(--cobalt);
  color:var(--paper);
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-size:1rem;
  font-weight:800;
  border:2.5px solid var(--ink);
  border-radius:12px;
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-3deg);
}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0;}
.brand-text strong{
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-size:1.02rem;
  font-weight:800;
  letter-spacing:-.01em;
}
.brand-text span{font-size:.74rem;font-weight:600;color:var(--ink-2);}

.topbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.top-link{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:7px 13px;
  font-size:.8rem;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:9px;
}
.top-link:hover{background:var(--mint);}
.top-link--salir:hover{background:var(--coral);color:var(--ink);}

.panel{
  width:min(1180px,100%);
  margin:0 auto;
  padding:clamp(20px,3.6vw,38px) clamp(14px,3.4vw,30px) 0;
}

.panel-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding-bottom:20px;
}

.panel-head h1{
  margin-top:4px;
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-size:clamp(2rem,5.4vw,3.2rem);
  font-weight:800;
  line-height:.95;
  letter-spacing:-.035em;
}

.panel-lede{
  max-width:52ch;
  margin-top:10px;
  font-size:.94rem;
  color:var(--ink-2);
}

.head-stats{display:flex;gap:12px;}
.stat{
  min-width:96px;
  padding:10px 16px 11px;
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:12px;
  box-shadow:4px 4px 0 var(--ink);
  text-align:center;
}
.stat-num{
  display:block;
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-size:1.75rem;
  font-weight:800;
  line-height:1;
}
.stat-label{display:block;margin-top:3px;font-size:.7rem;font-weight:700;color:var(--ink-2);}

/* ---------- Pestañas ---------- */

.tabs{
  display:flex;
  gap:8px;
  margin-bottom:22px;
  border-bottom:3px solid var(--ink);
}
.tab{
  position:relative;
  top:3px;
  padding:11px 18px 12px;
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-size:.92rem;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-bottom:none;
  border-radius:12px 12px 0 0;
}
.tab:hover{background:var(--sun);}
.tab.is-active{background:var(--ink);color:var(--sun);}

/* ---------- Tarjetas ---------- */

.card{
  margin-bottom:24px;
  padding:clamp(18px,3vw,28px);
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:18px;
  box-shadow:7px 7px 0 var(--ink);
}
#registro{box-shadow:7px 7px 0 var(--coral);}
#estudiantes,#progreso{box-shadow:7px 7px 0 var(--cobalt);}

.card-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-bottom:16px;
  margin-bottom:20px;
  border-bottom:2px solid var(--ink);
}
.card-kicker{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.card-head h2{
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-size:clamp(1.4rem,3vw,1.85rem);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
}
.card-note{font-size:.8rem;color:var(--ink-2);font-weight:600;}

/* ---------- Registro ---------- */

.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:16px;
}
.register-form > .field{margin-bottom:16px;}

.form-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-top:4px;
}
.form-note{font-size:.8rem;color:var(--ink-2);max-width:52ch;}
.form-note code{
  font-weight:700;
  background:var(--sun);
  border:1.5px solid var(--ink);
  border-radius:5px;
  padding:0 5px;
}

/* ---------- Filtros ---------- */

.filters{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  padding:14px;
  margin-bottom:20px;
  background:var(--paper-2);
  border:2.5px dashed var(--ink);
  border-radius:12px;
}
.field--filter{min-width:120px;}
.field--filter .field-label{font-size:.72rem;}
.field--filter input,
.field--filter select{min-height:42px;background:var(--paper);}
.field--grow{flex:1 1 190px;min-width:150px;}
.filter-actions{display:flex;gap:8px;}
.filter-actions .btn{min-height:42px;padding:8px 15px;font-size:.84rem;}

/* ---------- Tabla ---------- */

.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:.9rem;
}
.table th{
  padding:9px 12px;
  text-align:left;
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-size:.76rem;
  font-weight:700;
  color:var(--paper);
  background:var(--ink);
  border-bottom:none;
  white-space:nowrap;
}
.table th:first-child{border-radius:9px 0 0 9px;}
.table th:last-child{border-radius:0 9px 9px 0;}
.table td{
  padding:11px 12px;
  border-bottom:1.5px solid var(--line);
  vertical-align:middle;
}
.table tbody tr:last-child td{border-bottom:none;}
.table tbody tr:hover td{background:rgba(255,222,89,.18);}
.cell-name{font-weight:600;}
.col-actions{width:1%;white-space:nowrap;}

.grupo-chip{
  display:inline-block;
  min-width:36px;
  padding:2px 8px;
  font-size:.78rem;
  font-weight:700;
  text-align:center;
  background:var(--violet);
  border:1.5px solid var(--ink);
  border-radius:6px;
}

.clave-cell{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;}
.clave{
  display:inline-block;
  padding:3px 9px;
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.03em;
  background:var(--sun);
  border:2px solid var(--ink);
  border-radius:6px;
  white-space:nowrap;
}
.btn-copy{
  min-height:28px;
  padding:2px 8px;
  font-size:.7rem;
  font-weight:700;
  background:var(--paper);
  border:1.5px solid var(--ink);
  border-radius:5px;
  cursor:pointer;
}
.btn-copy:hover{background:var(--mint);}
.btn-copy.is-copied{background:var(--ink);color:var(--sun);}

.btn-table{
  min-height:34px;
  padding:5px 12px;
  font-size:.76rem;
  font-weight:700;
  border:2px solid var(--ink);
  border-radius:7px;
  cursor:pointer;
  background:var(--paper);
  white-space:nowrap;
}
.btn-table--edit:hover{background:var(--sun);}
.btn-table--del{background:var(--coral);}
.btn-table--del:hover{background:var(--ink);color:var(--coral);}
.inline-form{display:inline;}

/* ---------- Progreso ---------- */

.summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:20px;
}
.summary-item{
  padding:13px 14px;
  background:var(--paper-2);
  border:2.5px solid var(--ink);
  border-radius:11px;
  border-top-width:9px;
}
.summary-item--sin{border-top-color:var(--coral);}
.summary-item--curso{border-top-color:var(--sun);}
.summary-item--fin{border-top-color:var(--mint);}
.summary-num{
  display:block;
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-size:1.8rem;
  font-weight:800;
  line-height:1;
}
.summary-label{display:block;margin-top:4px;font-size:.74rem;font-weight:700;color:var(--ink-2);}

.student-name{display:block;font-weight:700;}
.student-step{display:block;margin-top:2px;font-size:.76rem;color:var(--ink-2);}

.progress-cell{min-width:170px;}
.bar{
  height:14px;
  overflow:hidden;
  background:var(--paper-2);
  border:2px solid var(--ink);
  border-radius:99px;
}
.bar span{
  display:block;
  height:100%;
  min-width:0;
  background:repeating-linear-gradient(-45deg, var(--cobalt) 0 8px, #5B70FF 8px 16px);
  border-radius:99px;
  transition:width .3s ease;
}
.progress-count{display:block;margin-top:4px;font-size:.76rem;font-weight:700;color:var(--ink-2);white-space:nowrap;}

.state{
  display:inline-block;
  padding:3px 9px;
  font-size:.72rem;
  font-weight:700;
  border:2px solid var(--ink);
  border-radius:999px;
  white-space:nowrap;
}
.state--sin{background:#FFD9D9;}
.state--curso{background:var(--sun);}
.state--fin{background:var(--mint);}
.cell-date{font-size:.8rem;color:var(--ink-2);white-space:nowrap;}

/* ---------- Vacío ---------- */

.empty{
  padding:34px 20px;
  text-align:center;
  background:var(--paper-2);
  border:2.5px dashed var(--ink);
  border-radius:12px;
}
.empty-title{
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-size:1.05rem;
  font-weight:700;
}
.empty-note{margin-top:5px;font-size:.85rem;color:var(--ink-2);}

/* ---------- Pie ---------- */

.panel-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  width:min(1180px,100%);
  margin:8px auto 0;
  padding:16px clamp(14px,3.4vw,30px) 0;
  border-top:2px solid var(--ink);
  font-size:.78rem;
  font-weight:600;
  color:var(--ink-2);
}
.panel-foot a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--cobalt);}

/* =========================================================
   DIÁLOGO DE EDICIÓN
   ========================================================= */

.edit-dialog{
  width:min(520px,calc(100vw - 28px));
  max-height:calc(100dvh - 40px);
  padding:0;
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:18px;
  box-shadow:10px 10px 0 var(--coral);
  color:var(--ink);
}
.edit-dialog::backdrop{background:rgba(23,21,40,.55);}
.edit-dialog form{padding:clamp(18px,4vw,26px);}
.dialog-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:2px solid var(--ink);
}
.dialog-head h2{
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:-.02em;
}
.dialog-close{
  flex:none;
  width:38px;
  height:38px;
  font-size:1.4rem;
  line-height:1;
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:9px;
  cursor:pointer;
}
.dialog-close:hover{background:var(--coral);}
.edit-dialog .field{margin-bottom:14px;}
.clave-actual{font-size:.84rem;color:var(--ink-2);margin-bottom:14px;}
.clave-actual code{
  font-weight:700;
  color:var(--ink);
  background:var(--sun);
  border:1.5px solid var(--ink);
  border-radius:5px;
  padding:1px 7px;
}
.check{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:20px;
  font-size:.86rem;
  cursor:pointer;
}
.check input{width:19px;height:19px;accent-color:var(--cobalt);flex:none;}
.dialog-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
.dialog-actions .btn{min-width:120px;}

/* =========================================================
   ADAPTACIÓN
   ========================================================= */

@media (max-width:900px){
  .summary{grid-template-columns:repeat(2,1fr);}
  .panel-head{align-items:flex-start;}
}

@media (max-width:760px){
  .table th,
  .table td{padding:10px 9px;font-size:.85rem;}
  .table--students th:nth-child(5),
  .table--students td:nth-child(5),
  .table--students th:nth-child(6),
  .table--students td:nth-child(6){padding-inline:6px;}
}

@media (max-width:720px){
  .table-wrap{overflow:visible;}
  .table,
  .table tbody,
  .table tr,
  .table td{display:block;width:100%;}
  .table thead{display:none;}
  .table tbody tr{
    margin-bottom:12px;
    padding:10px 14px;
    background:var(--paper);
    border:2.5px solid var(--ink);
    border-radius:13px;
    box-shadow:4px 4px 0 var(--line);
  }
  .table tbody tr:hover td{background:transparent;}
  .table td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:7px 0;
    border-bottom:1px dashed var(--line);
  }
  .table td:last-child{border-bottom:none;}
  .table td[data-label]::before{
    content:attr(data-label);
    flex:none;
    font-family:'Bricolage Grotesque', system-ui, sans-serif;
    font-size:.72rem;
    font-weight:700;
    color:var(--ink-2);
  }
  .cell-name{display:block !important;font-size:.98rem;}
  .cell-name::before{display:block;margin-bottom:2px;}
  .cell-action{justify-content:flex-end !important;}
  .cell-action::before{display:none;}
  .cell-action .btn-table,
  .cell-action .inline-form{width:100%;}
  .cell-action .btn-table{width:100%;min-height:40px;}
  .progress-cell{flex:1;min-width:0;}
  .bar{min-width:110px;}
  .cell-date{font-size:.78rem;text-align:right;}

  .form-foot{flex-direction:column;align-items:stretch;}
  .form-foot .btn{width:100%;}
  .filters{gap:10px;}
  .field--filter{flex:1 1 130px;}
  .filter-actions{width:100%;}
  .filter-actions .btn{flex:1;}
}

@media (max-width:560px){
  .tab-extra{display:none;}
  .topbar{padding:12px 14px;}
  .brand-text strong{font-size:.9rem;}
  .brand-text span{display:none;}
  .topbar-actions{width:100%;}
  .top-link{flex:1;justify-content:center;font-size:.75rem;}
  .panel-head h1{font-size:2rem;}
  .head-stats{width:100%;}
  .stat{flex:1;min-width:0;padding:8px 10px;}
  .stat-num{font-size:1.45rem;}
  .tabs{gap:5px;}
  .tab{flex:1;padding:10px 9px;font-size:.8rem;text-align:center;}
  .card{padding:16px 14px;border-radius:15px;box-shadow:5px 5px 0 var(--ink);}
  #registro{box-shadow:5px 5px 0 var(--coral);}
  #estudiantes,#progreso{box-shadow:5px 5px 0 var(--cobalt);}
  .field-row{grid-template-columns:1fr;}
  .summary{grid-template-columns:1fr 1fr;gap:8px;}
  .summary-num{font-size:1.5rem;}
  .flash-claves{grid-template-columns:1fr;}
  .login-card{box-shadow:7px 7px 0 var(--ink);}
  .dialog-actions .btn{flex:1;min-width:0;}
}

@media (max-width:380px){
  .panel{padding-inline:10px;}
  .field--filter{flex:1 1 100%;}
  .brand-mark{width:38px;height:38px;}
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }
}