/* =========================================================
   La armadura de un programa listo.

   Se carga DESPUÉS de estilos.css y demo.css y usa sus mismas
   variables y piezas (paneles, tablas, botones, hoja de
   impresión). Aquí va solo lo que un programa necesita y una
   herramienta no: la barra con pestañas, los avisos y las vistas.
   ========================================================= */

body.programa { min-height: 100vh; display: flex; flex-direction: column; }

/* Lo que el programa esconde con el atributo hidden se esconde de verdad,
   aunque la clase le ponga un display propio (los botones, por ejemplo). */
.programa [hidden] { display: none !important; }
/* min-width 0: si no, un hijo flexible no se encoge por debajo de su
   contenido y la tabla ancha empuja la página entera en vez de
   desplazarse dentro de su marco. */
body.programa > main { flex: 1; min-width: 0; width: 100%; padding-bottom: 3rem; }

/* --- Barra del programa ------------------------------------ */
.p-barra {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(244, 245, 249, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--texto);
}
.p-barra::after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--marca), var(--cian));
}
.p-barra .contenedor {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 60px;
  flex-wrap: wrap;
  padding-block: 0.4rem;
}

/* La marca es la misma de todo el sitio (.marca-logo, en estilos.css).
   El nombre del programa va aparte y chico, como etiqueta. */
.p-marca { color: var(--texto); white-space: nowrap; }
.p-marca:hover { color: var(--marca); }
.p-programa {
  padding: 0.25rem 0.55rem;
  border-radius: var(--curva-chica);
  background: var(--marca-tenue);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--marca);
  white-space: nowrap;
}
@media (max-width: 860px) { .p-barra .marca-logo span { display: none; } }
@media (max-width: 480px) { .p-barra .marca-logo b { display: none; } }

.p-negocio {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9rem;
}

/* Pestañas */
.p-pestanas { display: flex; gap: 0.25rem; margin-left: auto; flex-wrap: wrap; }
.p-pestanas button {
  padding: 0.45rem 0.75rem;
  border: 2px solid transparent;
  border-radius: var(--curva-chica);
  background: transparent;
  color: var(--tenue);
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.p-pestanas button:hover { color: var(--texto); border-color: var(--texto); }
.p-pestanas button[aria-selected="true"] { background: var(--texto); border-color: var(--texto); color: #fff; }

/* --- Avisos ------------------------------------------------ */
.p-avisos { display: grid; gap: 0.6rem; margin-top: 1.25rem; }
.p-avisos:empty { display: none; }

.p-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--texto);
  border-radius: var(--curva);
  background: var(--capa);
  font-size: 0.9rem;
}
.p-aviso p { margin: 0; flex: 1; min-width: 14rem; }
.p-aviso .h-boton { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
.p-aviso--marca  { border-color: var(--marca);  background: var(--marca-tenue); }
.p-aviso--alerta { border-color: var(--acento); background: var(--acento-tenue); }
.p-aviso--marca b { color: var(--marca); }

/* --- Vistas ------------------------------------------------ */
/* Las vistas son <section>, pero no son las partes de la portada: sin la
   raya de arriba ni el aire grande que estilos.css les da a esas. */
.p-vista { display: none; margin-top: 1.5rem; border-top: 0; padding: 0; }
.p-vista[aria-hidden="false"] { display: block; }

.p-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1.25rem;
}
.p-cabeza h1 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
}
.p-cabeza .rotulo { display: block; margin-bottom: 0.4rem; }
.p-cabeza .p-acciones { margin-left: auto; }

.p-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* Navegar semanas: anterior, la fecha, siguiente */
.p-semana {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 2px solid var(--texto);
  border-radius: var(--curva-chica);
  background: var(--capa);
}
.p-semana button {
  width: 2.2rem; height: 2.2rem;
  border: none; background: transparent; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--texto);
}
.p-semana button:hover { background: var(--marca-tenue); color: var(--marca); }
.p-semana input[type="date"] {
  border: none; background: transparent; font-family: var(--mono); font-size: 0.85rem;
  color: var(--texto); padding: 0 0.25rem;
}

/* Etiqueta de estado de la semana */
.p-estado {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--curva-chica);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.p-estado--borrador { background: var(--acento-tenue); color: var(--acento); }
.p-estado--pagada   { background: var(--marca-tenue);  color: var(--marca); }

/* Una lista de cosas guardadas (semanas, préstamos) */
.p-lista { display: grid; gap: 0.35rem; }
.p-lista button {
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  width: 100%; padding: 0.6rem 0.9rem;
  border: 1px solid var(--linea); border-radius: var(--curva-chica);
  background: var(--capa); color: var(--texto);
  font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer;
}
.p-lista button:hover { border-color: var(--texto); }
.p-lista button[aria-current="true"] { border-color: var(--marca); background: var(--marca-tenue); }
.p-lista .num { font-family: var(--mono); font-size: 0.85rem; }

/* Dos columnas en pantalla ancha: lista a la izquierda, detalle a la
   derecha. La tabla de la semana tiene dieciséis columnas, así que la
   lista se va arriba antes de lo normal. */
.p-dos { display: grid; grid-template-columns: 15rem 1fr; gap: 1.5rem; align-items: start; }
.p-dos > * { min-width: 0; }   /* que la celda se encoja y la tabla se desplace adentro */
@media (max-width: 1280px) {
  .p-dos { grid-template-columns: 1fr; }
  .p-dos > aside .p-lista { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .p-dos > aside .p-lista button { width: auto; }
}

/* Tablas del programa: casillas de horas angostas y nombres en una línea */
.programa .h-tabla input.dia { min-width: 3rem; width: 3.6rem; }
.programa .h-tabla td { padding: 0.25rem 0.4rem; }
.programa .h-tabla td:first-child { white-space: nowrap; }

/* Los totales del programa son cinco cuadros: cuando caben tres por
   fila queda un hueco, y el fondo de la rejilla es lo que se ve. Que sea
   una línea clara y no un bloque negro. */
.programa .h-totales { background: var(--linea); }

/* Botones chicos dentro de una celda: un ícono y ya */
.programa .h-tabla .h-boton.p-icono { padding: 0.25rem 0.45rem; font-size: 0.7rem; line-height: 1; gap: 0.3rem; vertical-align: middle; }
.programa .h-tabla .h-boton.p-icono svg { width: 13px; height: 13px; }

/* Tarjetas: en pantalla angosta, cada fila de una tabla con .p-tarjetas
   es una tarjeta con sus rótulos (data-rotulo en cada celda), para
   trabajar desde el teléfono. Las celdas .ancha ocupan todo el ancho y
   .acciones va al final, a la derecha. */
@media (max-width: 720px) {
  .programa .h-scroll:has(.p-tarjetas) { overflow: visible; }
  .programa table:has(.p-tarjetas) thead { display: none; }
  .programa table:has(.p-tarjetas), .programa .p-tarjetas { display: block; width: 100%; }
  .p-tarjetas tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 0.75rem; padding: 0.9rem 1rem; border-bottom: 2px solid var(--linea); }
  .p-tarjetas tr:hover { background: transparent; }
  .p-tarjetas tr:last-child { border-bottom: 0; }
  .p-tarjetas td { display: block; padding: 0 !important; border: 0; white-space: normal; }
  .p-tarjetas td[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--apagado);
  }
  .p-tarjetas td.ancha { grid-column: 1 / -1; }
  .p-tarjetas td input, .p-tarjetas td select { width: 100%; min-width: 0; }
  .p-tarjetas td.acciones { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; }
  .p-tarjetas td.acciones .h-quitar { margin: 0; }   /* el × se centra solo con margen automático en la celda; aquí va pegado al botón */
  .p-tarjetas tr.h-vacio { display: block; }
}

/* Campos en tabla que no se editan (semana pagada) */
.h-tabla input:disabled, .h-tabla select:disabled { color: var(--texto); opacity: 1; cursor: default; }

/* Texto de ayuda dentro de una vista */
.p-nota { font-size: 0.9rem; color: var(--tenue); max-width: 46rem; }

/* Código de activación */
.p-llave { font-family: var(--mono); font-size: 0.8rem; word-break: break-all; }

/* Instalar: el botón de la barra y el diálogo con los pasos */
.p-pestanas .p-instalar {
  margin-left: 0.5rem;
  border-color: var(--marca);
  background: var(--marca);
  color: var(--sobre-marca);
  transition: transform 0.15s, box-shadow 0.15s;
}
.p-pestanas .p-instalar:hover { color: var(--sobre-marca); border-color: var(--marca); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--texto); }
.p-dialogo {
  border: 2px solid var(--texto);
  border-radius: var(--curva);
  padding: 1.5rem;
  max-width: 26rem;
  width: calc(100% - 2rem);
  background: #fff;
  color: var(--texto);
  box-shadow: 6px 6px 0 var(--texto);
}
.p-dialogo::backdrop { background: rgba(20, 20, 40, 0.45); }
.p-dialogo h2 { margin: 0 0 0.75rem; font-size: 1.3rem; }
.p-dialogo p { margin: 0 0 0.75rem; }
.p-dialogo .p-acciones { margin-top: 1rem; justify-content: flex-end; }

/* --- Impresión: solo la vista activa, sin barra ------------ */
@media print {
  .p-barra, .p-avisos, .p-pestanas, .p-acciones, .p-lista, .p-semana { display: none !important; }
  .p-vista[aria-hidden="false"] { margin-top: 0; }
  .p-dos { grid-template-columns: 1fr; }
  .p-cabeza { margin-bottom: 4mm; padding-bottom: 3mm; border-bottom: 2px solid var(--marca); }
  .p-cabeza h1 { font-size: 16pt; }
  .p-estado { border: 1px solid #000; background: transparent !important; color: #000 !important; }
  /* En la hoja, dieciséis columnas tienen que caber en una carta acostada:
     letra más chica, columnas más angostas, y la tarifa fuera (está en Empleados) */
  .programa .h-tabla input.dia { width: 100%; min-width: 0; }
  .programa .h-tabla td:first-child { white-space: normal; }
  .programa .h-tabla th, .programa .h-tabla td { padding: 0.2rem 0.25rem; font-size: 8.5pt; }
  .programa .h-tabla input, .programa .h-tabla select { font-size: 8.5pt; padding: 0.1rem 0 !important; }
  .programa .h-tabla .col-angosta { width: 4.8rem; }
  .programa .h-tabla .col-mini { width: 2.6rem; }
  .programa .h-tabla td:first-child input { min-width: 6rem; }
  .programa .c-tarifa { display: none; }
}