*{box-sizing:border-box}
:root{
  --primary:#0b3456;--primary2:#0b6fb3;--bg:#f4f6f8;--text:#172033;--muted:#6d7888;--line:#e4e9ef;
  --ok:#12672f;--warn:#8a5a00;--danger:#9b1111;
}
html,body{height:100%}
body{font-family:Inter,Arial,sans-serif;margin:0;background:var(--bg);color:var(--text);line-height:1.45}
.page-shell{min-height:100vh;display:flex;flex-direction:column}
.topbar{background:var(--primary);color:white;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px;position:sticky;top:0;z-index:10;box-shadow:0 4px 14px rgba(0,0,0,.16)}
.brand strong{font-size:18px;letter-spacing:.2px}
.brand span{display:block;font-size:12px;color:#d5e8f7;margin-top:3px}
.main-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.main-nav a{color:white;text-decoration:none;font-weight:700;padding:8px 10px;border-radius:8px}
.main-nav a:hover{background:rgba(255,255,255,.12)}
.menu-toggle{display:none;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:white;border-radius:10px;font-size:22px;padding:6px 10px}
.container{width:100%;max-width:1250px;margin:24px auto;padding:0 18px;flex:1}
.footer{text-align:center;color:#6d7888;padding:28px 16px 34px;font-size:13px;margin-top:auto}
.footer strong{color:#0b3456}
.card{background:white;border-radius:16px;padding:20px;margin:18px 0;box-shadow:0 6px 18px rgba(21,45,70,.08);border:1px solid var(--line)}
.login-card{max-width:430px;margin:18px auto}
.grid{display:grid;gap:18px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.form-actions{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
.checkline{display:flex;align-items:end}
.checkline label{display:flex;gap:8px;align-items:center;margin-top:22px}
.checkline input{width:auto}
h1{font-size:30px;margin:8px 0 20px;line-height:1.2}
h2{font-size:20px;margin:0 0 12px;color:var(--primary)}
p{margin-top:8px}
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
table{width:100%;border-collapse:collapse;margin:10px 0;background:white}
th,td{border-bottom:1px solid #e6ebf1;padding:10px;text-align:left;vertical-align:top;font-size:14px}
th{background:#f0f5fa;color:var(--primary);font-weight:800;white-space:nowrap}
.wide{font-size:13px}
label{display:block;font-weight:800;margin:12px 0 6px}
input,textarea,select{width:100%;padding:11px 12px;border:1px solid #cad3df;border-radius:10px;font-size:16px;background:#fff}
textarea{min-height:88px;resize:vertical}
input.score{width:90px;max-width:100%}
.btn,button{display:inline-block;background:var(--primary2);color:white;border:none;border-radius:10px;padding:10px 14px;text-decoration:none;font-weight:800;cursor:pointer;font-size:14px}
.btn.small{padding:7px 10px;font-size:13px;border-radius:8px}
.btn.secondary{background:#596b7c}.btn.warning{background:#b26b00}
button:hover,.btn:hover{filter:brightness(.95)}
.badge{display:inline-block;border-radius:999px;padding:5px 9px;background:#e8eef5;color:#1c3045;font-size:12px;font-weight:900;white-space:nowrap}
.badge.ok{background:#dff6e7;color:var(--ok)}
.badge.info{background:#e0f0ff;color:#075a9b}
.badge.warn{background:#fff3d2;color:var(--warn)}
.alert{padding:12px;border-radius:10px;margin-bottom:12px}
.alert.ok{background:#e8f8ed;color:#146b2f}
.alert.error{background:#ffe8e8;color:var(--danger)}
.hint{background:#f7fafc;border-left:4px solid var(--primary2);padding:10px;margin-top:15px;border-radius:0 10px 10px 0}
.total-box{font-size:18px;background:#f0f5fa;border-radius:10px;padding:12px;margin:16px 0}
.actions a{margin-right:8px}
.search-bar{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center}
@media(max-width:900px){
  .grid.two,.form-grid{grid-template-columns:1fr}
  .topbar{padding:12px 16px;align-items:flex-start}
  .menu-toggle{display:block;margin-left:auto}
  .main-nav{display:none;width:100%;margin-top:12px;gap:6px}
  .nav-open .main-nav{display:grid;grid-template-columns:1fr 1fr}
  .main-nav a{background:rgba(255,255,255,.10);text-align:center}
  .container{margin:16px auto;padding:0 12px}
  h1{font-size:24px}
  h2{font-size:18px}
  .card{padding:16px;border-radius:14px;margin:14px 0}
  .search-bar{grid-template-columns:1fr}
  .search-bar .btn,.search-bar button{width:100%;text-align:center}
}
@media(max-width:640px){
  body{font-size:15px}
  .topbar{display:grid;grid-template-columns:1fr auto;gap:8px}
  .brand strong{font-size:16px}
  .brand span{font-size:11px}
  .nav-open .main-nav{grid-column:1/-1;grid-template-columns:1fr}
  .container{padding:0 10px;margin-top:12px}
  .footer{font-size:12px;padding-bottom:24px}
  .btn,button{width:100%;text-align:center;margin-top:4px}
  .btn.small{width:auto}
  input.score{width:100%}
  .responsive-table thead{display:none}
  .responsive-table,.responsive-table tbody,.responsive-table tr,.responsive-table td{display:block;width:100%}
  .responsive-table tr{border:1px solid #e2e8f0;border-radius:12px;margin:12px 0;padding:8px;background:white;box-shadow:0 3px 10px rgba(21,45,70,.05)}
  .responsive-table td{border-bottom:1px solid #eef2f6;padding:8px 8px 8px 46%;position:relative;min-height:38px;font-size:13px}
  .responsive-table td:last-child{border-bottom:none}
  .responsive-table td::before{content:attr(data-label);position:absolute;left:8px;top:8px;width:38%;font-weight:900;color:var(--primary);font-size:12px}
}

/* Parche configuración evaluación */

/* Parche navegación en botones de colores */
.nav-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.nav-buttons .nav-btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:7px;
  text-decoration:none !important;
  font-weight:900;
  border-radius:13px;
  border:1px solid transparent;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 5px 12px rgba(11,52,86,.12);
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.nav-buttons .nav-btn:hover{
  transform:translateY(-1px);
  filter:brightness(.97);
  box-shadow:0 7px 16px rgba(11,52,86,.18);
}
.nav-icon{font-size:15px;line-height:1}
.nav-label{line-height:1}

/* Menú superior */
.main-nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.main-nav .nav-btn{
  color:#fff !important;
  padding:10px 12px;
  min-height:39px;
  font-size:13px;
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22);
}
.main-nav .nav-inicio{background:#0b6fb3}
.main-nav .nav-programacion{background:#12672f}
.main-nav .nav-consolidado{background:#6a3fb3}
.main-nav .nav-usuarios{background:#0f766e}
.main-nav .nav-configuracion{background:#b26b00}
.main-nav .nav-cuenta{background:#596b7c}
.main-nav .nav-salir{background:#9b1111}

/* Botones rápidos debajo del título */
.quick-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:-6px 0 20px;
  padding:12px;
  border:1px solid var(--line);
  background:#ffffff;
  border-radius:18px;
  box-shadow:0 6px 18px rgba(21,45,70,.08);
}
.quick-nav .nav-btn{
  padding:12px 15px;
  min-height:44px;
  font-size:14px;
  color:#fff !important;
}
.quick-nav .nav-inicio{background:#0b6fb3;border-color:#075a93}
.quick-nav .nav-programacion{background:#16803c;border-color:#12672f}
.quick-nav .nav-consolidado{background:#6a3fb3;border-color:#573299}
.quick-nav .nav-usuarios{background:#0f766e;border-color:#0b5f5a}
.quick-nav .nav-configuracion{background:#b26b00;border-color:#8a5200}
.quick-nav .nav-cuenta{background:#596b7c;border-color:#415160}
.quick-nav .nav-salir{background:#c62828;border-color:#9b1111}

/* Mantener compatibilidad con clase danger anterior */
.main-nav a.danger-link,.quick-nav a.danger-link{
  color:#fff !important;
}

/* Responsive de navegación */
@media(max-width:900px){
  .topbar{padding:12px 16px;align-items:flex-start}
  .menu-toggle{display:block;margin-left:auto}
  .main-nav{display:none;width:100%;margin-top:12px;gap:8px}
  .nav-open .main-nav{display:grid;grid-template-columns:1fr 1fr}
  .main-nav .nav-btn{text-align:center;width:100%;padding:12px 8px}
}
@media(max-width:640px){
  .quick-nav{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin:-4px 0 16px;
    padding:10px;
    border-radius:16px;
  }
  .quick-nav .nav-btn{
    font-size:13px;
    padding:12px 8px;
    min-height:46px;
    width:100%;
  }
  .nav-icon{font-size:15px}
  .nav-open .main-nav{grid-column:1/-1;grid-template-columns:1fr}
}
@media(max-width:380px){
  .quick-nav{grid-template-columns:1fr}
}


/* =========================================================
   PARCHE MOBILE: Ficha de evaluación sin desplazamiento lateral
   ========================================================= */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

.page-shell,
.topbar,
.container,
.card{
  max-width:100%;
}

.card{
  overflow-wrap:anywhere;
}

.brand{
  min-width:0;
}

.brand strong,
.brand span{
  overflow-wrap:anywhere;
}

.grid.two > div{
  min-width:0;
}

.table-scroll{
  max-width:100%;
}

.rubrica-table{
  table-layout:fixed;
}

.rubrica-table th:nth-child(1),
.rubrica-table td:nth-child(1){
  width:28%;
}

.rubrica-table th:nth-child(2),
.rubrica-table td:nth-child(2){
  width:42%;
}

.rubrica-table th:nth-child(3),
.rubrica-table td:nth-child(3){
  width:12%;
}

.rubrica-table th:nth-child(4),
.rubrica-table td:nth-child(4){
  width:18%;
}

.rubrica-table td{
  overflow-wrap:anywhere;
}

.rubrica-table input.score{
  width:100%;
  min-width:70px;
  text-align:center;
}

.mobile-note{
  display:none;
}

@media(max-width:700px){
  body{
    overflow-x:hidden;
  }

  .topbar{
    width:100%;
    max-width:100vw;
    display:flex;
    align-items:center;
    gap:10px;
  }

  .brand{
    flex:1 1 auto;
    min-width:0;
  }

  .brand strong{
    font-size:17px;
    line-height:1.15;
  }

  .brand span{
    font-size:12px;
    line-height:1.25;
  }

  .menu-toggle{
    flex:0 0 auto;
  }

  .container{
    margin:16px auto;
    padding:0 12px;
    max-width:100vw;
  }

  h1{
    font-size:23px;
    line-height:1.15;
    margin:8px 0 14px;
    overflow-wrap:anywhere;
  }

  h2{
    font-size:18px;
  }

  .card{
    padding:15px;
    border-radius:15px;
    margin:14px 0;
  }

  .card p{
    overflow-wrap:anywhere;
  }

  .actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  .actions .btn,
  .actions a{
    width:100%;
    text-align:center;
    margin-right:0;
  }

  .mobile-note{
    display:block;
    background:#f7fafc;
    border-left:4px solid var(--primary2);
    padding:10px;
    border-radius:0 10px 10px 0;
    font-size:13px;
    color:#3b4b5f;
  }

  .rubrica-table,
  .rubrica-table thead,
  .rubrica-table tbody,
  .rubrica-table tr,
  .rubrica-table th,
  .rubrica-table td{
    display:block;
    width:100% !important;
  }

  .rubrica-table{
    border-collapse:separate;
    border-spacing:0;
    background:transparent;
    margin-top:10px;
  }

  .rubrica-table thead{
    display:none;
  }

  .rubrica-table tr{
    background:#fff;
    border:1px solid #dfe7f0;
    border-radius:14px;
    margin:0 0 12px;
    padding:12px;
    box-shadow:0 3px 10px rgba(21,45,70,.06);
  }

  .rubrica-table td{
    border-bottom:none;
    padding:7px 0;
    font-size:15px;
  }

  .rubrica-table td::before{
    content:attr(data-label);
    display:block;
    font-size:12px;
    font-weight:900;
    color:var(--primary);
    text-transform:uppercase;
    letter-spacing:.02em;
    margin-bottom:3px;
  }

  .rubrica-table td[data-label="Criterio"]{
    font-size:16px;
    font-weight:900;
    color:#172033;
    padding-top:0;
  }

  .rubrica-table td[data-label="Descripción"]{
    color:#263244;
    line-height:1.35;
  }

  .rubrica-table td[data-label="Máximo"]{
    display:inline-block;
    width:48% !important;
    vertical-align:top;
    padding-right:6px;
  }

  .rubrica-table td[data-label="Puntaje"]{
    display:inline-block;
    width:50% !important;
    vertical-align:top;
    padding-left:6px;
  }

  .rubrica-table input.score{
    width:100%;
    min-width:0;
    height:46px;
    font-size:18px;
    font-weight:900;
    text-align:center;
    border-radius:12px;
  }

  .total-box{
    font-size:17px;
    position:sticky;
    bottom:0;
    z-index:5;
    box-shadow:0 -4px 14px rgba(21,45,70,.10);
  }
}

@media(max-width:430px){
  .rubrica-table td[data-label="Máximo"],
  .rubrica-table td[data-label="Puntaje"]{
    display:block;
    width:100% !important;
    padding-left:0;
    padding-right:0;
  }

  .rubrica-table input.score{
    max-width:100%;
  }

  input, textarea, select{
    max-width:100%;
  }
}


/* =========================================================
   PARCHE FINAL MÓVIL: encabezado, menú y formularios sin desborde
   Objetivo: evitar letras verticales y desplazamiento lateral en celulares.
   ========================================================= */

/* Base anti-desborde */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

body {
  min-width: 320px;
}

.page-shell, main, .container, .card, .grid, .form-grid, .table-scroll {
  max-width: 100%;
}

/* Encabezado estable en escritorio */
.topbar {
  width: 100%;
}

.brand {
  min-width: 0 !important;
  max-width: 100%;
}

.brand strong,
.brand span {
  word-break: normal !important;
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  hyphens: none !important;
}

/* Navegación superior: no obligar ancho mayor al viewport */
.main-nav.nav-buttons {
  min-width: 0;
}

/* Ficha de evaluación: evitar que nombres largos rompan el layout */
.card p,
.card div,
.card td,
.card th {
  max-width: 100%;
}

.grid.two > * {
  min-width: 0;
}

/* Responsive real para móviles */
@media (max-width: 700px) {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px;
    align-items: center !important;
    gap: 10px;
    width: 100%;
    max-width: 100vw;
    padding: 12px 12px;
  }

  .brand {
    min-width: 0 !important;
    width: 100%;
    max-width: calc(100vw - 92px);
  }

  .brand strong {
    display: block;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  .brand span {
    display: block;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    margin-top: 2px;
  }

  .menu-toggle {
    display: inline-flex !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center;
    justify-content: center;
    justify-self: end;
    border-radius: 14px;
    font-size: 26px !important;
    line-height: 1 !important;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.35);
  }

  .main-nav.nav-buttons {
    display: none !important;
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
    gap: 8px;
  }

  .nav-open .main-nav.nav-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .main-nav .nav-btn {
    width: 100% !important;
    max-width: 100%;
    min-height: 46px;
    padding: 12px 10px !important;
    justify-content: center;
    text-align: center;
  }

  .container {
    width: 100%;
    max-width: 100vw;
    margin: 14px auto;
    padding-left: 10px;
    padding-right: 10px;
  }

  h1 {
    max-width: 100%;
    font-size: 23px !important;
    line-height: 1.18 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .card {
    width: 100%;
    max-width: 100%;
    padding: 14px;
    border-radius: 15px;
    overflow: hidden;
  }

  .grid.two {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* Textos largos: permitir corte natural en contenido, no en marca */
  .card p,
  .card li,
  .card td,
  .card .wide {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Formularios cómodos para celular */
  input, textarea, select {
    max-width: 100%;
    font-size: 16px !important;
  }

  .form-actions,
  .actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .btn, button {
    max-width: 100%;
  }
}

/* Celulares muy angostos */
@media (max-width: 390px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) 50px;
    padding: 10px 10px;
  }

  .brand {
    max-width: calc(100vw - 78px);
  }

  .brand strong {
    font-size: 15px !important;
  }

  .brand span {
    display: none !important;
  }

  .menu-toggle {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
  }

  h1 {
    font-size: 21px !important;
  }
}

/* Seguridad y cronómetro - parche Demo Day */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border, #dbe4ef);
  border-radius: 14px;
  background: #f8fbff;
}
.switch-row input[type="checkbox"] {
  width: 46px;
  height: 26px;
  accent-color: #0b7fc4;
  flex: 0 0 auto;
}
.timer-card {
  border-left: 6px solid #0b7fc4;
}
.timer-display {
  font-size: clamp(2.4rem, 9vw, 5rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-align: center;
  color: #0b3d63;
  background: #eef7ff;
  border: 2px solid #b9ddf6;
  border-radius: 22px;
  padding: 22px 12px;
  margin: 16px 0;
}
.timer-display.timer-alert {
  color: #b26b00;
  background: #fff7e5;
  border-color: #ffd68a;
}
.timer-display.timer-finished {
  color: #b42318;
  background: #fff0f0;
  border-color: #ffb4b4;
}
.timer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.locked-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  opacity: .82;
}
.muted {
  color: #667085;
  font-size: .95rem;
}
.alert.error, .badge.error {
  background: #fff0f0;
  color: #b42318;
}
@media (max-width: 640px) {
  .switch-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .switch-row input[type="checkbox"] {
    width: 64px;
    height: 34px;
  }
  .timer-actions .btn {
    width: 100%;
    justify-content: center;
  }
}