/* =====================================================================
   AROUND ME · Organización de artistas
   Paleta y tipografía según el manual de marca v2.0
   ===================================================================== */

:root {
  --negro:     #010101;
  --antracita: #171917;
  --taupe:     #B39B84;
  --gris:      #E4E5E4;
  --blanco:    #FEFEFE;

  --linea:     #262826;
  --linea-alt: #333533;
  --tenue:     #7a7c7a;
  --tenue-alt: #9a9c9a;

  /* Estado del artista. Únicos colores del sistema aparte del taupe: son
     señal de trabajo, no identidad de marca. Van desaturados a propósito
     para no competir con el color que aporta el artista. */
  --activo:           #7F9E88;
  --activo-borde:     #38493E;
  --pausa:            #B39B84;
  --pausa-borde:      #4A4038;
  --descartado:       #9A6459;
  --descartado-borde: #45302B;

  /* Curvas. La marca no dice nada de esquinas, pero todo a escuadra
     resultaba duro de leer. Cuatro pasos y ni uno más, para que el
     conjunto se lea como una sola pieza. */
  --radio-xs: 4px;    /* casillas, puntos, marcas diminutas */
  --radio-s:  7px;    /* campos, botones, pastillas */
  --radio-m:  10px;   /* tarjetas, secciones, contenedores */
  --radio-g:  14px;   /* modales y paneles */

  --fuente: "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--fuente);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  /* Para que los selectores nativos de fecha y hora salgan en oscuro */
  color-scheme: dark;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: inherit; }

/* ---------- Etiquetas del sistema ---------- */
.etiqueta {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
  font-weight: 500;
}
.tenue { color: var(--tenue); }

h1, h2, h3 { letter-spacing: -0.04em; font-weight: 700; margin: 0; }
h1 { font-size: 30px; }
h2 { font-size: 22px; }
h3 { font-size: 16px; }

/* ---------- Cabecera ---------- */
.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 34px;
  border-bottom: 1px solid var(--linea);
  flex-wrap: wrap;
}
.cabecera .marca { flex: none; }
.marca {
  font-style: italic;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.03em;
}
.marca span {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--taupe);
  margin-top: 3px;
}
/* ---------- Barra lateral ---------- */
.marco {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  align-items: start;
}

.lateral {
  border-right: 1px solid var(--linea);
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
}

.lateral button {
  border-radius: var(--radio-s);
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  background: none;
  border: 1px solid transparent;
  color: var(--tenue-alt);
  padding: 9px 11px;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
}
.lateral button:hover { color: var(--blanco); background: var(--antracita); }
.lateral button.activo {
  color: var(--blanco);
  background: var(--antracita);
  border-color: var(--linea-alt);
}

.lateral svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lateral button span { flex: 1; }

/* Recuento de artistas en cada fase */
.lateral button i {
  font-style: normal;
  color: var(--taupe);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.lateral button i:empty { display: none; }

/* El grupo Proceso: captación, producción y entregas.
   Cerrado por arriba y por abajo, así Historial y Facturación
   quedan claramente fuera del recorrido del artista. */
.grupo {
  margin: 18px 0;
  padding: 16px 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.grupo > .etiqueta {
  display: block;
  padding: 0 11px 8px;
  font-size: 10px;
}

.icono-cabecera { padding: 8px; }
.icono-cabecera.activo { color: var(--blanco); border-color: var(--linea-alt); }

@media (max-width: 900px) {
  .marco { grid-template-columns: 1fr; }
  .lateral {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--linea);
    padding: 12px 18px;
  }
  .lateral button { width: auto; }
  .lateral button span { flex: none; }
  .grupo {
    display: contents;   /* los tres botones se alinean con el resto */
  }
  .grupo > .etiqueta { display: none; }
}

/* ---------- Lista de nombres (pestaña Artistas) ---------- */
.lista-nombres { list-style: none; margin: 0; padding: 0; }
.lista-nombres li {
  border-bottom: 1px solid var(--linea);
  padding: 15px 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.lista-nombres li:hover { background: var(--antracita); }
.lista-nombres li { display: flex; align-items: center; gap: 12px; }

/* Estado y fase bajo el nombre, en la ficha */
.proceso {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 12px;
  flex-wrap: wrap;
}

/* Botón de ajustes de la ficha */
.acciones-panel { display: flex; align-items: center; gap: 4px; }
.icono {
  border-radius: var(--radio-s);
  background: none;
  border: 1px solid transparent;
  color: var(--tenue);
  cursor: pointer;
  padding: 6px;
  display: grid;
  place-items: center;
  line-height: 0;
}
.icono:hover { color: var(--blanco); border-color: var(--linea-alt); }

/* ---------- Plazo de entrega ---------- */
.plazo {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 5px;
}
.plazo.sinEmpezar { color: var(--tenue); }   /* el rodaje aún no ha pasado */
.plazo.enPlazo    { color: var(--gris); }
.plazo.justo      { color: var(--taupe); }   /* quedan 3 días o menos */
.plazo.vencido    { color: var(--descartado); font-weight: 700; }
.plazo.aTiempo    { color: var(--activo); }
.plazo.tarde      { color: var(--descartado); }

/* ---------- Cifras de facturación ---------- */
.cifras {
  border-radius: var(--radio-m);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 220px));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  margin: 26px 0 0;
  width: fit-content;
}
.cifra {
  background: var(--negro);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cifra strong {
  font-size: 24px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cifra .tenue { font-size: 11px; }

@media (max-width: 700px) {
  .cifras { grid-template-columns: 1fr; width: 100%; }
}

/* ---------- Mensajería ---------- */
.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 26px 0 22px;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 14px;
}
.pestana {
  border-radius: var(--radio-s);
  background: none;
  border: 1px solid var(--linea-alt);
  color: var(--tenue-alt);
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
}
.pestana:hover { color: var(--gris); border-color: var(--tenue); }
.pestana.activa { color: var(--blanco); border-color: var(--blanco); }
.pestana i {
  font-style: normal;
  color: var(--taupe);
  font-size: 10px;
  margin-left: 6px;
}

.mensajeria {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 30px;
  align-items: start;
}
.previsualizacion {
  border-radius: var(--radio-m);
  border: 1px solid var(--linea);
  padding: 20px;
}
.previsualizacion .dato { font-size: 12px; margin-bottom: 7px; }
.previsualizacion .dato .tenue { display: inline-block; min-width: 100px; }

.aviso-linea {
  border-radius: var(--radio-s);
  border: 1px solid var(--pausa-borde);
  color: var(--taupe);
  padding: 11px 14px;
  font-size: 12px;
  margin: 0 0 18px;
}

.cuerpo-mensaje {
  border-radius: var(--radio-m);
  background: var(--antracita);
  border: 1px solid var(--linea);
  padding: 14px;
  margin: 16px 0 0;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.6;
  color: var(--gris);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 340px;
  overflow-y: auto;
}

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

/* ---------- Agenda ---------- */
.paso-nav { display: flex; gap: 4px; }

.calendario {
  border-radius: var(--radio-m);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
.cabecera-dia {
  background: var(--negro);
  padding: 10px 12px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
}
.celda {
  background: var(--negro);
  min-height: 96px;
  padding: 9px 11px;
  cursor: pointer;
}
.calendario.semana .celda { min-height: 220px; }
.celda:hover { background: var(--antracita); }
.celda.fuera { opacity: 0.3; }
.celda.hoy .numero { color: var(--blanco); font-weight: 700; }
.celda.rodaje { background: var(--antracita); }
.celda.rodaje:hover { background: #1f211f; }

.celda-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 7px;
}
.celda .numero { font-size: 13px; color: var(--tenue-alt); font-variant-numeric: tabular-nums; }
.celda .cupo {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--activo);
  border: 1px solid var(--activo-borde);
  padding: 1px 5px;
}
.celda .cupo.lleno { color: var(--taupe); border-color: var(--pausa-borde); }
.convocado {
  border-radius: var(--radio-s);
  font-size: 11px;
  color: var(--gris);
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Detalle de un día */
.dia-rodaje {
  border-radius: var(--radio-s);
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 30px;
  align-items: start;
}
.detalle-dia {
  border-radius: var(--radio-m); border: 1px solid var(--linea); padding: 20px; }

.convocatoria {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--linea);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.convocatoria .cuerpo { flex: 1; }
.convocatoria .hora {
  width: 104px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

@media (max-width: 1000px) {
  .dia-rodaje { grid-template-columns: 1fr; }
  .calendario.semana { grid-template-columns: 1fr; }
  .calendario.semana .celda { min-height: 0; }
}

/* ---------- Casilla con texto ---------- */
.casilla-texto {
  border-radius: var(--radio-s);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--gris);
  font-size: 13px;
}
.casilla-texto input { accent-color: var(--taupe); cursor: pointer; }

/* ---------- Contenedor ---------- */
.pagina { padding: 34px; max-width: 1500px; }

.titulo-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* ---------- Barra de herramientas ---------- */
.herramientas {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 26px 0 18px;
}
.herramientas .separador { flex: 1; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="time"], input[type="number"],
select, textarea {
  border-radius: var(--radio-s);
  background: var(--antracita);
  border: 1px solid var(--linea);
  color: var(--blanco);
  padding: 9px 12px;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--taupe); }
input::placeholder, textarea::placeholder { color: var(--tenue); }
textarea { resize: vertical; min-height: 70px; width: 100%; }

.buscador { width: 260px; }

.boton {
  border-radius: var(--radio-s);
  background: var(--blanco);
  color: var(--negro);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
}
.boton:hover { background: var(--gris); }
.boton.fantasma {
  background: none;
  color: var(--gris);
  border: 1px solid var(--linea-alt);
}
.boton.fantasma:hover { border-color: var(--taupe); color: var(--blanco); }
.boton.peligro { background: none; color: var(--tenue); border: 1px solid var(--linea); }
.boton.peligro:hover { color: #e08b7a; border-color: #6b3a30; }
.boton.mini { padding: 5px 11px; font-size: 11px; }

/* ---------- Tabla ---------- */
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
  font-weight: 500;
  padding: 0 14px 11px;
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--linea); cursor: pointer; }
tbody tr:hover { background: var(--antracita); }
tbody td { padding: 15px 14px; vertical-align: middle; }

.nombre-artista { font-weight: 700; letter-spacing: -0.02em; font-size: 15px; }
.handle { color: var(--tenue); font-size: 12px; margin-top: 2px; }

.enlaces { display: flex; gap: 7px; }
.enlaces a {
  border-radius: var(--radio-s);
  width: 27px; height: 27px;
  display: grid; place-items: center;
  border: 1px solid var(--linea-alt);
  color: var(--tenue-alt);
  text-decoration: none;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.enlaces a:hover { border-color: var(--taupe); color: var(--blanco); }
.enlaces .vacio { opacity: 0.25; pointer-events: none; }

/* ---------- Progreso ---------- */
.barra {
  border-radius: var(--radio-xs); height: 2px; background: var(--linea-alt); width: 140px; margin-bottom: 7px; }
.barra i { display: block; height: 100%; background: var(--blanco); }
.paso-actual { font-size: 12px; color: var(--gris); }
.paso-actual em { font-style: normal; color: var(--tenue); }

/* Desplegar el progreso tema a tema */
.desplegar {
  border-radius: var(--radio-s);
  background: none;
  border: none;
  color: var(--tenue);
  cursor: pointer;
  padding: 0 4px 0 0;
  line-height: 0;
  vertical-align: -1px;
}
.desplegar svg { transition: transform 0.15s ease; }
.desplegar:hover { color: var(--blanco); }
.desplegar.abierto svg { transform: rotate(180deg); }

.por-tema {
  list-style: none;
  margin: 9px 0 0;
  padding: 9px 0 0;
  border-top: 1px solid var(--linea);
  font-size: 12px;
}
.por-tema li {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.8;
  color: var(--gris);
}
.por-tema li.listo { color: var(--activo); }

.dias { font-variant-numeric: tabular-nums; font-size: 13px; }
.dias.frio { color: var(--taupe); }

/* Lista de temas / fechas apilados dentro de una celda */
.temas { list-style: none; margin: 0; padding: 0; }
.temas li { position: relative; padding-left: 12px; line-height: 1.7; }
.temas li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--tenue);
}
/* Tema ya resuelto en esta fase: check en vez de guión */
.temas li.listo { color: var(--activo); display: flex; align-items: center; gap: 6px; padding-left: 0; }
.temas li.listo::before { content: none; }

.falta { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.falta li { line-height: 1.7; }

.fila-tema { display: flex; gap: 8px; align-items: center; }
.fila-tema input { flex: 1; }

.pastilla {
  border-radius: var(--radio-s);
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid var(--linea-alt);
  color: var(--tenue-alt);
  white-space: nowrap;
}
/* El estado del artista, con el mismo color en toda la plataforma */
.pastilla.activo     { color: var(--activo);     border-color: var(--activo-borde); }
.pastilla.pausa      { color: var(--pausa);      border-color: var(--pausa-borde); }
.pastilla.descartado { color: var(--descartado); border-color: var(--descartado-borde); }
.pastilla.invitado   { color: var(--taupe);      border-color: var(--pausa-borde); }

/* Punto de estado, para donde no cabe la pastilla */
.punto-estado {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
  background: var(--tenue);
}
.punto-estado.activo     { background: var(--activo); }
.punto-estado.pausa      { background: var(--pausa); }
.punto-estado.descartado { background: var(--descartado); }

.vacio-total { padding: 70px 14px; color: var(--tenue); text-align: center; }

/* ---------- Panel lateral ---------- */
.velo {
  position: fixed; inset: 0;
  background: rgba(1,1,1,0.72);
  z-index: 40;
}
.panel {
  border-radius: var(--radio-g) 0 0 var(--radio-g);
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 560px; max-width: 100vw;
  background: var(--negro);
  border-left: 1px solid var(--linea);
  z-index: 50;
  overflow-y: auto;
  padding: 30px 34px 90px;
}
.panel-cabecera {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; margin-bottom: 26px;
}
.cerrar {
  background: none; border: none; color: var(--tenue);
  font-size: 24px; cursor: pointer; line-height: 1; padding: 0;
}
.cerrar:hover { color: var(--blanco); }

.bloque { margin: 30px 0; }
.bloque > .etiqueta { display: block; margin-bottom: 13px; }

.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tenue); }
.campo.ancho { grid-column: 1 / -1; }

/* ---------- Desplegables ---------- */
/* Nacen abiertos. La clase .plegado los cierra. */
.seccion-cabecera {
  border-radius: var(--radio-s);
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 14px 16px;
  color: inherit;
}
.seccion-cabecera:hover { background: var(--antracita); }
.seccion-cabecera .etiqueta { flex: 1; }

.chevron {
  width: 6px; height: 6px; flex: none;
  border-right: 1px solid var(--tenue);
  border-bottom: 1px solid var(--tenue);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  margin-top: -3px;
}
.plegado > .seccion-cabecera .chevron { transform: rotate(-45deg); margin-top: 0; }
.seccion-cabecera:hover .chevron { border-color: var(--taupe); }

.seccion-cuerpo { padding: 0 16px 18px; }
.plegado > .seccion-cuerpo { display: none; }

/* ---------- Checklist ---------- */
.sesion {
  border: 1px solid var(--linea);
  margin-bottom: 10px;
}
.sesion-tema { flex: 1; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
.sesion-resumen { font-size: 12px; color: var(--tenue); white-space: nowrap; }
.sesion.plegado .sesion-tema { font-weight: 500; color: var(--gris); }
.sesion-meta { color: var(--tenue); font-size: 12px; margin-bottom: 16px; }

/* Aviso de fase cerrada, al pie del checklist */
.fase-hecha {
  border-radius: var(--radio-s);
  border-top: 1px solid var(--linea);
  margin-top: 14px;
  padding-top: 14px;
  font-size: 12px;
  color: var(--taupe);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.paso { border-top: 1px solid var(--linea); padding: 12px 0; }
.sesion-meta + .paso { border-top: none; }
.paso-linea { display: flex; align-items: center; gap: 11px; }
.paso-nombre { flex: 1; }
.paso.hecho .paso-nombre { color: var(--tenue-alt); }
.paso-fecha { font-size: 11px; color: var(--tenue); font-variant-numeric: tabular-nums; }

.casilla {
  border-radius: var(--radio-xs);
  width: 17px; height: 17px; flex: none;
  border: 1px solid var(--linea-alt);
  background: none; cursor: pointer;
  display: grid; place-items: center;
  padding: 0; color: var(--negro);
  font-size: 11px; line-height: 1;
}
.casilla:hover { border-color: var(--taupe); }
.casilla.marcada { background: var(--blanco); border-color: var(--blanco); }
.casilla.parcial { border-color: var(--taupe); }
.casilla.parcial::after { content: ""; width: 7px; height: 7px; background: var(--taupe); }

/* Paso con un requisito sin cumplir */
.paso.bloqueado .paso-nombre { color: var(--tenue); }
.paso.bloqueado .paso-fecha { color: var(--taupe); }
.casilla.bloqueada { border-style: dashed; border-color: var(--linea); }
.sub.bloqueada {
  opacity: 0.4;
  cursor: default;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--linea);
  padding: 5px 11px 5px 8px;
  font-size: 12px;
  color: var(--tenue);
}

/* Paso que no aplica a este artista */
.paso.omitido .paso-nombre { color: var(--tenue); text-decoration: line-through; }
.paso.omitido .paso-fecha { color: var(--taupe); }
.casilla.omitida {
  border-style: dashed;
  border-color: var(--linea-alt);
  color: var(--tenue);
  cursor: default;
}

.subopciones { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 2px 28px; }
.sub {
  border-radius: var(--radio-s);
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--linea);
  padding: 5px 11px 5px 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--tenue-alt);
  background: none;
}
.sub:hover { border-color: var(--linea-alt); color: var(--gris); }
.sub .punto { width: 7px; height: 7px; border: 1px solid var(--tenue); flex: none; }
.sub.marcada { color: var(--blanco); border-color: var(--tenue); }
.sub.marcada .punto { background: var(--blanco); border-color: var(--blanco); }

/* ---------- Configuración ---------- */
.seccion-config {
  border-radius: var(--radio-m);
  border: 1px solid var(--linea);
  margin-bottom: 10px;
}
.seccion-config > .seccion-cabecera .etiqueta { flex: none; }
.seccion-config > .seccion-cabecera .tenue { margin-left: auto; }
.seccion-config > .seccion-cuerpo { padding-top: 4px; }
.seccion-config .paso-config:last-child { margin-bottom: 0; }

.paso-config {
  border-radius: var(--radio-m);
  border: 1px solid var(--linea);
  padding: 18px 20px;
  margin-bottom: 10px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.paso-config.inactivo { opacity: 0.42; }
.paso-config .cuerpo { flex: 1; }
.paso-config .titulo { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; margin-bottom: 5px; }
.paso-config .detalle { color: var(--tenue); font-size: 12px; }
.paso-config .acciones { display: flex; gap: 6px; align-items: center; }
.orden { display: flex; flex-direction: column; gap: 3px; }
.orden button {
  border-radius: var(--radio-s);
  background: none; border: 1px solid var(--linea);
  color: var(--tenue); cursor: pointer;
  width: 24px; height: 19px; line-height: 1; padding: 0; font-size: 10px;
}
.orden button:hover { border-color: var(--taupe); color: var(--blanco); }
.orden button:disabled { opacity: 0.3; cursor: default; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.chip {
  border-radius: var(--radio-s);
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--linea); padding: 4px 6px 4px 10px;
  font-size: 12px; color: var(--tenue-alt);
}
.chip button { background: none; border: none; color: var(--tenue); cursor: pointer; padding: 0 2px; }
.chip button:hover { color: #e08b7a; }

/* ---------- Modal ---------- */
.modal {
  border-radius: var(--radio-g);
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 520px; max-width: calc(100vw - 40px);
  max-height: calc(100vh - 60px); overflow-y: auto;
  background: var(--negro);
  border: 1px solid var(--linea-alt);
  padding: 30px 32px;
  z-index: 60;
}
.modal-pie { display: flex; gap: 10px; justify-content: flex-end; margin-top: 26px; }

/* ---------- Avisos ---------- */
.aviso {
  border-radius: var(--radio-m);
  border: 1px solid var(--taupe);
  padding: 26px 30px;
  margin: 34px;
  max-width: 760px;
  line-height: 1.6;
}
.aviso code {
  background: var(--antracita);
  padding: 2px 6px;
  color: var(--taupe);
  font-size: 13px;
}
.aviso ol { padding-left: 20px; }
.aviso li { margin-bottom: 9px; }

.cargando { padding: 70px 34px; color: var(--tenue); }

@media (max-width: 900px) {
  .pagina, .cabecera { padding-left: 18px; padding-right: 18px; }
  .panel { width: 100%; padding: 24px 20px 80px; }
  .rejilla { grid-template-columns: 1fr; }
  .ocultable { display: none; }
  .buscador { width: 100%; }
}

/* ---------- Puerta de entrada ---------- */
/* Sin sesión no hay navegación que ofrecer: solo el formulario. */
.acciones-cabecera { display: flex; align-items: center; gap: 4px; }

body.sin-sesion .lateral,
body.sin-sesion .acciones-cabecera { display: none; }
body.sin-sesion .marco { grid-template-columns: minmax(0, 1fr); }

.entrada {
  display: grid;
  place-items: center;
  padding: 8vh 20px;
}
.tarjeta-entrada {
  border-radius: var(--radio-g);
  width: 100%;
  max-width: 380px;
  border: 1px solid var(--linea);
  background: var(--antracita);
  padding: 32px;
}
.tarjeta-entrada .campo { margin-bottom: 14px; }


/* =====================================================================
   PANTALLAS PEQUEÑAS
  
   El ordenador ya iba bien; esto es para el móvil y la tableta. Va al
   final del archivo a propósito: son ajustes sobre lo de arriba, y aquí
   ganan sin tener que pelearse con la especificidad.
   ===================================================================== */

/* Un hijo de grid o de flex no encoge por debajo de su contenido si no se
   le dice. Sin esto, una tabla ancha o una fila de pestañas estira la
   columna entera y la página se va hacia la derecha en el móvil. */
.marco > main,
.pagina,
.mensajeria > *,
.dia-rodaje > * { min-width: 0; }

/* Lo que no cabe se arrastra dentro de su caja, no estirando la página. */
.tabla-ancha { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-ancha table { min-width: 100%; }

/* ---------------- Tableta ---------------- */
@media (max-width: 1024px) {
  .pagina { padding: 28px 22px; }
}

/* ---------------- Móvil ---------------- */
@media (max-width: 700px) {
  .pagina { padding: 22px 16px 60px; }
  .cabecera { padding: 16px; }

  h1 { font-size: 27px; }

  /* El título y su botón, en dos líneas cuando no caben en una */
  .titulo-fila { flex-wrap: wrap; gap: 12px; }

  /* Filas de botones: que bajen en vez de salirse */
  .acciones { flex-wrap: wrap; justify-content: flex-end; }

  /* Configuración: los tres botones de cada paso, en su propia línea. Si
     comparten fila con el nombre, lo estrujan hasta partirlo en tres. */
  .paso-config { flex-wrap: wrap; }
  .paso-config .acciones { flex: 1 0 100%; justify-content: flex-start; }

  /* Se toca con el dedo, no con el ratón */
  .boton { padding: 12px 18px; }
  .boton.mini { padding: 8px 13px; }
  .pestana { padding: 10px 13px; }
  .lateral button { padding: 9px 11px; }
  .icono { padding: 9px; }

  /* 16px en los campos no es un capricho de diseño: por debajo de eso,
     Safari del iPhone hace zoom solo al tocarlos y deja la página torcida. */
  input, select, textarea { font-size: 16px; padding: 11px 12px; }

  /* La barra de herramientas: los desplegables se reparten el ancho */
  .herramientas { gap: 8px; margin: 20px 0 14px; }
  .herramientas select { flex: 1 1 140px; min-width: 0; }
  .herramientas .separador { display: none; }

  /* Navegación: más apretada, para no comerse media pantalla */
  .lateral { padding: 10px 12px; gap: 2px; }

  /* Calendario: celdas más bajas, que en vertical no hay sitio */
  .celda { min-height: 62px; padding: 6px 5px; }
  .cabecera-dia { padding: 8px 4px; font-size: 9px; letter-spacing: 0.08em; }
  .calendario.semana .celda { min-height: 150px; }

  /* Ventanas flotantes: casi toda la pantalla, y con aire abajo */
  .modal { padding: 24px 20px; max-height: 88vh; overflow-y: auto; }

  /* El nombre no se parte nunca. Así la tabla se ensancha solo lo que de
     verdad hace falta —y entonces se arrastra—, en vez de estrujar
     "Sela Quiroga" en dos líneas para ganar diez píxeles. Las fases que
     caben, siguen cabiendo. */
  .tabla-ancha .nombre-artista { white-space: nowrap; }
  .tabla-ancha th, .tabla-ancha td { padding-left: 10px; padding-right: 10px; }
}