/* ==========================================================================
   Carteleria digital - Buses Fernandez
   Panel de administracion.
   ========================================================================== */

:root {
  --primario:   #005fb0;
  --primario-osc: #004a8a;
  --acento:     #1b84ff;
  --tinta:      #16233a;
  --tinta-media:#5a6b85;
  --tinta-suave:#8595ad;
  --linea:      #e2e8f2;
  --fondo:      #f4f7fb;
  --panel:      #ffffff;
  --lateral:    #0c1a2c;
  --exito:      #0f9d58;
  --aviso:      #d97706;
  --error:      #d93025;
  --radio:      12px;
  --sombra:     0 1px 2px rgba(16, 33, 60, .06), 0 8px 24px rgba(16, 33, 60, .06);
}

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primario); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.01em; }

/* --------------------------------------------------------------------------
   Estructura
   -------------------------------------------------------------------------- */

.app {
  display: grid;
  grid-template-columns: 264px 1fr;
  min-height: 100vh;
}

.contenido {
  padding: 28px 32px 64px;
  min-width: 0;
}

.encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.encabezado h1 { font-size: 26px; }
.encabezado__acciones { display: flex; gap: 10px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Barra lateral
   -------------------------------------------------------------------------- */

.lateral {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 22px 16px;
  background: var(--lateral);
  color: #cfd9e8;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.lateral__marca { display: flex; align-items: center; gap: 12px; padding: 0 6px; }

.marca__icono {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--primario), var(--acento));
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  flex-shrink: 0;
}

.marca__texto { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.marca__texto strong { color: #fff; font-size: 15px; }
.marca__texto span { font-size: 12.5px; color: #7d90ab; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lateral__menu { display: flex; flex-direction: column; gap: 3px; }

.menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  color: #b9c6d9;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}

.menu__item svg { width: 19px; height: 19px; flex-shrink: 0; opacity: .85; }
.menu__item:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }

.menu__item.es-activo {
  background: linear-gradient(135deg, var(--primario), var(--acento));
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 95, 176, .35);
}

.lateral__pantallas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.lateral__rotulo {
  padding: 0 12px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #607593;
}

.enlace-pantalla {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 9px;
  color: #b9c6d9;
  font-size: 14px;
}

.enlace-pantalla:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }

.miniatura {
  display: block;
  position: relative;
  width: 26px;
  height: 17px;
  border: 1.5px solid #52678a;
  border-radius: 3px;
  flex-shrink: 0;
}

.miniatura i {
  position: absolute;
  top: 0;
  bottom: 5px;
  width: 6px;
  background: var(--acento);
}

.miniatura--izq i { left: 0; }
.miniatura--der i { right: 0; }

.miniatura::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: #52678a;
}

.lateral__usuario {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.usuario { display: flex; align-items: center; gap: 11px; padding: 4px 6px; border-radius: 9px; }
.usuario:hover { background: rgba(255, 255, 255, .06); text-decoration: none; }

.usuario__avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}

.usuario__datos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.usuario__datos strong { color: #fff; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Componentes
   -------------------------------------------------------------------------- */

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 22px;
  margin-bottom: 20px;
}

.tarjeta__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linea);
  font-size: 17px;
}

.tarjeta__nota { font-size: 13px; color: var(--tinta-media); font-weight: 400; }

/* Botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 17px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--primario);
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}

.boton:hover { background: var(--primario-osc); text-decoration: none; color: #fff; }
.boton:active { transform: translateY(1px); }
.boton svg { width: 17px; height: 17px; }

.boton--claro   { background: var(--panel); color: var(--tinta); border-color: var(--linea); }
.boton--claro:hover { background: #eef2f8; color: var(--tinta); }
.boton--peligro { background: var(--error); }
.boton--peligro:hover { background: #b3261e; }
.boton--tenue   { background: rgba(255, 255, 255, .08); color: #cfd9e8; }
.boton--tenue:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.boton--bloque  { width: 100%; }
.boton--chico   { padding: 6px 12px; font-size: 13.5px; border-radius: 8px; }

/* Formularios */

.campos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo--ancho { grid-column: 1 / -1; }

.campo > label { font-size: 13.5px; font-weight: 600; color: var(--tinta); }
.campo__ayuda { font-size: 12.5px; color: var(--tinta-media); }

input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="datetime-local"], input[type="file"], select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--linea);
  border-radius: 9px;
  background: #fff;
  color: var(--tinta);
  font-family: inherit;
  font-size: 14.5px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(27, 132, 255, .16);
}

textarea { min-height: 150px; resize: vertical; line-height: 1.55; }

input[type="color"] {
  width: 100%;
  height: 42px;
  padding: 3px;
  border: 1px solid var(--linea);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}

.interruptor { display: flex; align-items: center; gap: 10px; font-size: 14.5px; cursor: pointer; }
.interruptor input { width: 18px; height: 18px; accent-color: var(--primario); cursor: pointer; }

.acciones-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
}

/* Tablas */

.tabla-envoltorio { overflow-x: auto; margin: 0 -22px -22px; padding: 0 22px 4px; }

table.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.tabla th {
  padding: 10px 12px;
  border-bottom: 2px solid var(--linea);
  color: var(--tinta-media);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.tabla td { padding: 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: #f8fafd; }
.tabla .col-acciones { text-align: right; white-space: nowrap; }
.celda-principal { font-weight: 600; }
.celda-secundaria { display: block; font-size: 13px; color: var(--tinta-media); font-weight: 400; }

/* Etiquetas */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.etiqueta--admin    { background: rgba(0, 95, 176, .12);  color: var(--primario); }
.etiqueta--editor   { background: rgba(15, 157, 88, .12); color: var(--exito); }
.etiqueta--activo   { background: rgba(15, 157, 88, .12); color: var(--exito); }
.etiqueta--inactivo { background: rgba(90, 107, 133, .14); color: var(--tinta-media); }
.etiqueta--programado { background: rgba(217, 119, 6, .14); color: var(--aviso); }
.etiqueta--vencido  { background: rgba(217, 48, 37, .1);  color: var(--error); }
.etiqueta--izquierda, .etiqueta--derecha, .etiqueta--ambas {
  background: rgba(27, 132, 255, .1); color: var(--primario);
  text-transform: none; font-weight: 600; letter-spacing: 0;
}

/* Alertas */

.alerta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 14.5px;
}

.alerta--exito { background: #e8f5ee; border-color: #b7e0c8; color: #0b6b3d; }
.alerta--error { background: #fdecea; border-color: #f5c2be; color: #a52218; }
.alerta--aviso { background: #fef4e6; border-color: #f6dcb0; color: #96540a; }
.alerta--info  { background: #e9f2fd; border-color: #c3ddf8; color: #0b4f8f; }

/* Estados vacios */

.vacio {
  padding: 46px 24px;
  text-align: center;
  color: var(--tinta-media);
}

.vacio svg { width: 46px; height: 46px; opacity: .3; margin-bottom: 10px; }
.vacio p { margin: 0 0 16px; }

/* Indicadores del panel */

.indicadores {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 22px;
}

.indicador {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.indicador__icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: rgba(0, 95, 176, .1);
  color: var(--primario);
  flex-shrink: 0;
}

.indicador__icono svg { width: 22px; height: 22px; }
.indicador__cifra { font-size: 25px; font-weight: 700; line-height: 1.1; }
.indicador__texto { font-size: 13px; color: var(--tinta-media); }

/* Vista previa de banners */

.rejilla-banners {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.banner-ficha {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
}

.banner-ficha__medio {
  position: relative;
  aspect-ratio: 9 / 16;
  background: #0c1a2c;
  overflow: hidden;
}

.banner-ficha__medio img, .banner-ficha__medio video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.banner-ficha__cuerpo { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.banner-ficha__titulo { font-weight: 600; font-size: 14px; word-break: break-word; }
.banner-ficha__pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }

/* Orden por arrastre / botones de orden */

.orden-controles { display: inline-flex; flex-direction: column; gap: 2px; }
.orden-controles button {
  width: 24px; height: 18px;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 5px;
  background: #fff;
  color: var(--tinta-media);
  cursor: pointer;
  line-height: 1;
  font-size: 11px;
}
.orden-controles button:hover { background: #eef2f8; color: var(--primario); }

/* Pestañas de ajustes */

.pestanas {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--linea);
}

.pestana {
  padding: 10px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--tinta-media);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}

.pestana:hover { color: var(--tinta); }
.pestana.es-activa { color: var(--primario); border-bottom-color: var(--primario); }
.panel-pestana[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Login y paginas centradas
   -------------------------------------------------------------------------- */

.pagina-centro {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background: linear-gradient(150deg, #0c1a2c 0%, #123a63 55%, #005fb0 100%);
}

.tarjeta-acceso, .tarjeta-error {
  width: 100%;
  max-width: 400px;
  padding: 34px 32px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(5, 20, 40, .35);
}

.tarjeta-error { max-width: 460px; text-align: center; }
.tarjeta-error h1 { margin-bottom: 10px; font-size: 22px; }
.tarjeta-error p { color: var(--tinta-media); margin-bottom: 22px; }

.acceso__marca { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 26px; text-align: center; }
.acceso__marca .marca__icono { width: 54px; height: 54px; border-radius: 15px; font-size: 19px; }
.acceso__marca h1 { font-size: 20px; }
.acceso__marca p { margin: 0; font-size: 13.5px; color: var(--tinta-media); }

.acceso__campos { display: flex; flex-direction: column; gap: 15px; }
.acceso__pie { margin-top: 22px; text-align: center; font-size: 12.5px; color: var(--tinta-suave); }

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }

  .lateral {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
  }

  .lateral__menu { flex-direction: row; flex-wrap: wrap; flex: 1; }
  .lateral__pantallas { flex-direction: row; align-items: center; border-top: 0; padding-top: 0; }
  .lateral__rotulo { display: none; }
  .lateral__usuario { margin-top: 0; flex-direction: row; align-items: center; border-top: 0; padding-top: 0; }
  .lateral__usuario .boton--bloque { width: auto; }
  .contenido { padding: 20px 16px 48px; }
  .menu__item span { display: none; }
  .menu__item { padding: 10px; }
}

@media print {
  .lateral, .encabezado__acciones, .acciones-form { display: none; }
  .app { grid-template-columns: 1fr; }
}

/* Agrupacion por ubicacion en la lista lateral de pantallas */
.lateral__lugar {
  padding: 8px 12px 2px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #7d90ab;
}

.miniatura:empty::before {
  content: "";
  position: absolute;
  inset: 3px 3px 7px;
  background: rgba(255, 255, 255, .12);
  border-radius: 2px;
}