:root {
  --concreto: #EDEFEA;
  --asfalto: #1F2B33;
  --asfalto-2: #2C3A44;
  --gris: #5E6B72;
  --linea: #D3D8D4;
  --senal: #F2B705;
  --ok: #1E7A4C;
  --ok-fondo: #E3F2EA;
  --error: #B3261E;
  --error-fondo: #F9E4E2;
  --info-fondo: #E6EEF3;
  --blanco: #FFFFFF;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--concreto); color: var(--asfalto); font: 400 15px/1.5 "Barlow", system-ui, sans-serif; }
a { color: inherit; }
h1 { font: 700 1.9rem/1.1 "Barlow Semi Condensed", sans-serif; margin: 0; }
h2 { font: 600 1.25rem/1.2 "Barlow Semi Condensed", sans-serif; margin: 0 0 .9rem; }
:focus-visible { outline: 3px solid var(--senal); outline-offset: 2px; }

/* Estructura */
.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.lateral { background: var(--asfalto); color: #DDE3E6; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.marca { display: block; padding: 1.2rem 1.25rem 1rem; text-decoration: none; color: var(--blanco); border-bottom: 6px solid; border-image: repeating-linear-gradient(-45deg, var(--senal) 0 10px, var(--asfalto) 10px 20px) 6; }
.marca b { display: block; font: 700 1.35rem/1 "Barlow Semi Condensed", sans-serif; }
.marca span { font-size: .85rem; color: #AEB8BD; }
.menu { list-style: none; margin: 0; padding: 1rem .6rem; flex: 1; }
.menu a { display: block; padding: .6rem .8rem; border-radius: 6px; text-decoration: none; font-weight: 500; }
.menu a:hover { background: var(--asfalto-2); }
.menu a[aria-current] { background: var(--senal); color: var(--asfalto); font-weight: 600; }
.lateral-pie { padding: 1rem 1.25rem 1.25rem; font-size: .85rem; border-top: 1px solid var(--asfalto-2); }
.lateral-pie p { margin: 0 0 .5rem; color: #AEB8BD; }
.lateral-pie a { color: var(--blanco); }
.contenido { padding: 2rem clamp(1rem, 3vw, 2.5rem) 4rem; min-width: 0; }
.cabecera { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.abrir-menu { display: none; }

/* Componentes */
.caja { background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: 1.25rem; margin-bottom: 1.25rem; }
.boton { display: inline-block; font: 600 .95rem "Barlow", sans-serif; cursor: pointer; text-decoration: none; border: 2px solid var(--asfalto); border-radius: 6px; padding: .45rem 1rem; background: var(--senal); color: var(--asfalto); white-space: nowrap; }
.boton.sec { background: transparent; }
.boton.peligro { background: transparent; border-color: var(--error); color: var(--error); }
.boton.chico { padding: .25rem .6rem; font-size: .85rem; }
.aviso { border-radius: 6px; padding: .75rem 1rem; margin-bottom: 1.25rem; }
.aviso.ok { background: var(--ok-fondo); color: var(--ok); }
.aviso.error { background: var(--error-fondo); color: var(--error); }
.aviso ul { margin: .35rem 0 0; padding-left: 1.2rem; }
.nota { color: var(--gris); font-size: .9rem; }

/* Tablas */
.herramientas { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.herramientas form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; flex: 1; }
.tabla { overflow-x: auto; background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-weight: 600; white-space: nowrap; background: #F6F7F5; }
tr:last-child td { border-bottom: 0; }
td.poly { font-size: .82rem; color: var(--gris); max-width: 180px; overflow-wrap: anywhere; }
td.acciones { white-space: nowrap; }
td.acciones form { display: inline; }
.fecha { white-space: nowrap; }
.vacio { padding: 2.5rem 1rem; text-align: center; color: var(--gris); }
.estado { display: inline-block; padding: .1rem .5rem; border-radius: 99px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.estado.feed { background: var(--ok-fondo); color: var(--ok); }
.estado.prog { background: var(--info-fondo); color: #245B7A; }
.estado.venc { background: #EEE; color: var(--gris); }
.estado.inac { background: var(--error-fondo); color: var(--error); }
.pagination { display: flex; gap: .3rem; list-style: none; padding: 0; margin: 1rem 0 0; flex-wrap: wrap; }
.pagination a { display: block; padding: .3rem .7rem; border: 1px solid var(--linea); border-radius: 5px; background: var(--blanco); text-decoration: none; }
.pagination .active a { background: var(--asfalto); color: var(--blanco); border-color: var(--asfalto); }

/* Formularios */
label { display: block; font-weight: 600; margin-bottom: .3rem; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=datetime-local], select, textarea {
  width: 100%; font: inherit; padding: .5rem .65rem; border: 1px solid #B9C1BD; border-radius: 6px; background: var(--blanco); color: var(--asfalto);
}
textarea { min-height: 90px; resize: vertical; }
.herramientas input[type=search] { max-width: 320px; }
.herramientas select { width: auto; }
.rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.25rem; }
.rejilla .ancho { grid-column: 1 / -1; }
.ayuda { font-size: .85rem; color: var(--gris); margin: .3rem 0 0; }
.check { display: flex; gap: .5rem; align-items: center; font-weight: 500; }
.pie-form { display: flex; gap: .75rem; margin-top: 1.25rem; }

/* Panel */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.cifra { background: var(--blanco); border: 1px solid var(--linea); border-left: 6px solid var(--linea); border-radius: 8px; padding: 1rem 1.1rem; }
.cifra.principal { border-left-color: var(--senal); }
.cifra b { display: block; font: 700 2.2rem/1 "Barlow Semi Condensed", sans-serif; }
.cifra span { color: var(--gris); font-size: .9rem; }
.url-feed { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; padding: .5rem 0; border-bottom: 1px solid var(--linea); }
.url-feed:last-child { border-bottom: 0; }
.url-feed b { min-width: 3rem; }
.url-feed code { flex: 1; overflow-wrap: anywhere; }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: var(--asfalto); }
.login .caja { width: min(380px, 100%); padding: 2rem; border: 0; border-top: 10px solid; border-image: repeating-linear-gradient(-45deg, var(--senal) 0 14px, var(--asfalto) 14px 28px) 10; }
.login h1 { margin-bottom: .3rem; }
.login p { margin: 0 0 1.5rem; color: var(--gris); }
.login .campo { margin-bottom: 1rem; }
.login .boton { width: 100%; padding: .65rem; }

@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; }
  .abrir-menu { display: inline-block; position: absolute; right: 1rem; top: 1rem; background: transparent; color: var(--blanco); border-color: var(--blanco); }
  .lateral { position: relative; }
  .lateral:not(.abierto) .menu, .lateral:not(.abierto) .lateral-pie { display: none; }
  .rejilla { grid-template-columns: 1fr; }
}