/* =====================================================================
   CRM FBI · estilos
   ===================================================================== */
:root {
  --fondo: #f5f6f8;
  --superficie: #ffffff;
  --borde: #e2e5ea;
  --texto: #1f2733;
  --texto-suave: #687385;
  --primario: #2457c5;
  --primario-oscuro: #1b4399;
  --peligro: #c2372b;
  --aviso: #b7791f;
  --ok: #2f855a;

  --estado-opcion: #f6c453;
  --estado-opcion-fondo: #fff8e6;
  --estado-confirmado: #3b6fd8;
  --estado-confirmado-fondo: #eaf1ff;
  --estado-realizado: #2f9e66;
  --estado-realizado-fondo: #e8f7ef;
  --estado-facturado: #8a94a6;
  --estado-facturado-fondo: #f0f2f5;
  --estado-cancelado: #d0473b;
  --estado-cancelado-fondo: #fdecea;

  --radio: 8px;
  --sombra: 0 6px 24px rgba(20, 30, 50, .12);
  --barra-alto: 52px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--texto);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* que ningún display de clase lo anule */
html, body { margin: 0; height: 100%; }
body { background: var(--fondo); }
h1, h2 { margin: 0 0 .6em; line-height: 1.2; }
h2 { font-size: 1.15rem; }

/* --- Barra superior ------------------------------------------------- */
.barra {
  height: var(--barra-alto);
  display: flex; align-items: center; gap: 24px;
  padding: 0 16px;
  background: #16213a; color: #fff;
}
.marca { color: #fff; font-weight: 700; text-decoration: none; letter-spacing: .02em; }
.barra nav { display: flex; gap: 4px; flex: 1; }
.barra nav a { color: #c9d3e6; text-decoration: none; padding: 6px 12px; border-radius: 6px; }
.barra nav a.activo, .barra nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.barra-usuario { display: flex; align-items: center; gap: 10px; color: #c9d3e6; }
.barra-usuario form { margin: 0; }
.boton-enlace { background: none; border: 0; color: #fff; cursor: pointer; text-decoration: underline; font: inherit; }

.contenido { height: calc(100% - var(--barra-alto)); }

/* --- Botones y formularios ------------------------------------------ */
.boton {
  font: inherit; padding: 8px 16px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
}
.boton:hover { border-color: #c4cad4; }
.boton-primario { background: var(--primario); border-color: var(--primario); color: #fff; }
.boton-primario:hover { background: var(--primario-oscuro); }
.boton-aviso { background: var(--aviso); border-color: var(--aviso); color: #fff; }
.boton:disabled { opacity: .6; cursor: wait; }

label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .85rem; color: var(--texto-suave); }
input, select, textarea {
  font: inherit; color: var(--texto); font-weight: 400;
  padding: 8px 10px; border: 1px solid var(--borde); border-radius: 6px; background: #fff;
}
input:focus, select:focus { outline: 2px solid color-mix(in srgb, var(--primario) 35%, transparent); border-color: var(--primario); }
.ayuda { font-weight: 400; color: var(--aviso); min-height: 1em; }
/* Un campo nunca ensancha su contenedor (selects con opciones largas, números…) */
label > input, label > select, label > textarea { max-width: 100%; min-width: 0; }
.fila-2 > *, .fila-3 > *, .rejilla > * { min-width: 0; }

/* --- Acceso --------------------------------------------------------- */
.pagina-acceso { display: grid; place-items: center; padding: 16px; }
.caja-acceso {
  width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px;
  background: var(--superficie); padding: 32px; border-radius: 12px; box-shadow: var(--sombra);
}
.caja-acceso h1 { margin: 0; font-size: 1.5rem; }
.subtitulo { margin: -10px 0 4px; color: var(--texto-suave); }
.aviso { padding: 10px 12px; border-radius: 6px; }
.aviso-error { background: var(--estado-cancelado-fondo); color: var(--peligro); }

/* --- Layout del calendario ------------------------------------------ */
.calendario-layout { display: grid; grid-template-columns: 1fr 290px; height: 100%; }
.calendario-principal { display: flex; flex-direction: column; padding: 12px 16px; min-width: 0; }
#calendario { flex: 1; min-height: 0; background: var(--superficie); border-radius: var(--radio); padding: 10px; }

.leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.leyenda-item { font-size: .78rem; padding: 2px 8px; border-radius: 10px; border-left: 4px solid; background: var(--superficie); }
.leyenda-ayuda { margin-left: auto; color: var(--texto-suave); font-size: .78rem; }
.leyenda-item.estado-opcion { border-color: var(--estado-opcion); }
.leyenda-item.estado-confirmado { border-color: var(--estado-confirmado); }
.leyenda-item.estado-realizado { border-color: var(--estado-realizado); }
.leyenda-item.estado-facturado { border-color: var(--estado-facturado); }
.leyenda-item.estado-cancelado { border-color: var(--estado-cancelado); }

/* --- Panel de intérpretes ------------------------------------------- */
.panel-interpretes {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--superficie); border-left: 1px solid var(--borde);
}
.panel-cabecera { padding: 14px 14px 8px; border-bottom: 1px solid var(--borde); }
.panel-cabecera input { width: 100%; }
.panel-contexto { margin: 8px 0 0; font-size: .8rem; color: var(--texto-suave); }

.lista-interpretes { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; }
.lista-vacia { padding: 16px; color: var(--texto-suave); text-align: center; }

.ficha-interprete {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; margin-bottom: 6px; border-radius: var(--radio);
  border: 1px solid var(--borde); background: #fff;
  cursor: grab; user-select: none; transition: opacity .15s, transform .1s;
}
.ficha-interprete:hover { border-color: var(--color-interprete); }
.ficha-interprete:active { cursor: grabbing; transform: scale(.98); }
.ficha-alias {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .8rem;
  background: var(--color-interprete); color: #fff;
}
.ficha-datos { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ficha-datos strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ficha-datos small { color: var(--texto-suave); }
.ficha-marca { font-size: .7rem; padding: 1px 6px; border-radius: 8px; background: var(--estado-cancelado-fondo); color: var(--peligro); }
.ficha-interprete.ocupado, .ficha-interprete.sin-idioma { opacity: .5; }
.ficha-interprete.sin-idioma:not(.ocupado) .ficha-marca { background: var(--estado-opcion-fondo); color: var(--aviso); }
.ficha-interprete.asignado { opacity: .6; border-style: dashed; }
.ficha-interprete.asignado .ficha-marca { background: var(--estado-realizado-fondo); color: var(--ok); }

/* --- Sesiones en el calendario -------------------------------------- */
.fc .fc-event { cursor: pointer; }
.fc-timegrid-event, .fc-daygrid-event {
  border: 0 !important; border-left: 4px solid var(--borde-estado) !important;
  background: var(--fondo-estado) !important; color: var(--texto) !important;
  box-shadow: inset 0 -2px 0 var(--color-cliente, transparent);
}
.fc-daygrid-event { white-space: normal; }
.fc .fc-event .fc-event-main { color: var(--texto); }   /* FullCalendar pone texto blanco por defecto */
.fc-event.fc-event-mirror { --borde-estado: var(--primario); --fondo-estado: var(--estado-confirmado-fondo); opacity: .85; }
.sesion-nueva { font-weight: 700; color: var(--primario); }
.fc-event.estado-opcion { --borde-estado: var(--estado-opcion); --fondo-estado: var(--estado-opcion-fondo); }
.fc-event.estado-confirmado { --borde-estado: var(--estado-confirmado); --fondo-estado: var(--estado-confirmado-fondo); }
.fc-event.estado-realizado { --borde-estado: var(--estado-realizado); --fondo-estado: var(--estado-realizado-fondo); }
.fc-event.estado-facturado { --borde-estado: var(--estado-facturado); --fondo-estado: var(--estado-facturado-fondo); }
.fc-event.estado-cancelado { --borde-estado: var(--estado-cancelado); --fondo-estado: var(--estado-cancelado-fondo); }
.fc-event.cancelada .sesion-titulo { text-decoration: line-through; }
.fc-event.estado-opcion { border-left-style: dashed !important; }

.fc-event.seleccionada { outline: 2px solid var(--primario); outline-offset: 1px; z-index: 5 !important; }
.fc-event.destino-drop { outline: 3px dashed var(--ok); outline-offset: 2px; filter: brightness(1.03); }
body.arrastrando-interprete .fc-event[data-sesion] { outline: 1px dashed #9aa5b5; }

.sesion { padding: 2px 4px; overflow: hidden; height: 100%; font-size: .78rem; line-height: 1.25; }
.sesion-cabecera { display: flex; justify-content: space-between; gap: 4px; color: var(--texto-suave); }
.sesion-dia { font-size: .7rem; background: rgba(0,0,0,.06); padding: 0 4px; border-radius: 4px; }
.sesion-propuesta.con-aviso { color: var(--aviso); }
.sesion-propuesta { font-size: .68rem; font-weight: 700; color: var(--texto-suave); margin-left: auto; margin-right: 4px; white-space: nowrap; }
.chip-sin-coste { box-shadow: 0 0 0 1px #fff, 0 0 0 2.5px var(--aviso); }
.sugerencia { margin: -4px 0 0; min-height: 1.2em; }
.sesion-titulo { font-weight: 700; }
.sesion-cliente { color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sesion-interpretes { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; align-items: center; }

.chip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 0 5px; border-radius: 9px; font-size: .72rem; font-weight: 700;
  border: 1.5px solid var(--color-interprete); color: var(--color-interprete); background: #fff;
}
.chip-propuesto { border-style: dashed; }
.chip-confirmado { background: var(--color-interprete); color: #fff; }
.chip-rechazado { text-decoration: line-through; opacity: .5; }
.chip-quitar {
  border: 0; background: none; padding: 0 0 0 2px; margin: 0; cursor: pointer;
  color: inherit; font: inherit; line-height: 1; opacity: 0; transition: opacity .1s;
}
.chip:hover .chip-quitar, .chip-quitar:focus { opacity: 1; }
.contador { font-size: .7rem; color: var(--ok); font-weight: 700; margin-left: auto; }
.contador.incompleto { color: var(--peligro); }

/* --- Diálogos ------------------------------------------------------- */
.dialogo { border: 0; border-radius: 12px; padding: 24px; width: min(560px, calc(100% - 32px)); box-shadow: var(--sombra); }
.dialogo::backdrop { background: rgba(15, 22, 36, .45); }
.dialogo form { display: flex; flex-direction: column; gap: 12px; }
.dialogo-pequeno { width: min(440px, calc(100% - 32px)); }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fila-3 { display: grid; grid-template-columns: 1fr 1fr minmax(90px, 110px); gap: 12px; }
.estado-radios { border: 0; padding: 0; margin: 0; display: flex; gap: 16px; }
.estado-radios label { flex-direction: row; align-items: center; gap: 6px; color: var(--texto); }
.acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.lista-conflictos { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.conflicto-solape, .conflicto-ausencia { color: var(--peligro); }
.conflicto-idioma { color: var(--aviso); }

/* --- Avisos flotantes ----------------------------------------------- */
.avisos { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 1000; width: min(520px, calc(100% - 32px)); }
.aviso-flotante {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--radio); background: #1f2733; color: #fff; box-shadow: var(--sombra);
}
.aviso-flotante span { flex: 1; }
.aviso-flotante button { background: none; border: 0; color: #9cc0ff; font: inherit; font-weight: 700; cursor: pointer; }
.aviso-flotante .aviso-cerrar { color: #aab3c2; font-size: 1.2rem; line-height: 1; }
.aviso-flotante.aviso-error { background: var(--peligro); }
.aviso-flotante.aviso-error button { color: #fff; }
.aviso-flotante.aviso-aviso { background: #8a5a12; }

/* --- Ausencias en el calendario ------------------------------------- */
.fc .fc-event.ausencia {
  border: 0 !important; border-left: 3px solid var(--color-interprete, #999) !important;
  background: repeating-linear-gradient(135deg, #f1f2f5, #f1f2f5 6px, #e8eaef 6px, #e8eaef 12px) !important;
  cursor: default; box-shadow: none;
}
.ausencia-texto { font-size: .74rem; color: var(--texto-suave); padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc .fc-timegrid-axis-cushion { font-size: .7rem; color: var(--texto-suave); }

/* --- Páginas de gestión (listados y fichas) ------------------------- */
.contenido:has(.pagina) { overflow-y: auto; }
.pagina { max-width: 1200px; margin: 0 auto; padding: 20px 16px 60px; }
.pagina-estrecha { max-width: 860px; }
.pagina-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pagina-cabecera h1 { margin: 0; font-size: 1.4rem; }
.pagina-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pagina-herramientas input[type=search] { width: 320px; max-width: 100%; }
a.boton { text-decoration: none; display: inline-block; }
.volver { display: inline-block; margin-bottom: 12px; color: var(--texto-suave); text-decoration: none; }
.volver:hover { color: var(--primario); }

.interruptor, .casilla { flex-direction: row; align-items: center; gap: 6px; font-weight: 500; color: var(--texto); cursor: pointer; }
.casilla { align-self: end; padding-bottom: 8px; }

.tabla-contenedor { background: var(--superficie); border-radius: var(--radio); overflow-x: auto; border: 1px solid var(--borde); }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); padding: 10px 14px; border-bottom: 1px solid var(--borde); }
.tabla td { padding: 10px 14px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla-vacia { text-align: center; color: var(--texto-suave); padding: 32px !important; }
.fila-enlace { cursor: pointer; }
.fila-enlace:hover, .fila-enlace:focus { background: #f7f9fc; outline: none; }
.fila-enlace.inactivo { opacity: .55; }
.tabla-compacta td, .tabla-compacta th { padding: 6px 10px; }
.derecha { text-align: right !important; }

.persona { display: flex; align-items: center; gap: 10px; }
.persona small { color: var(--texto-suave); }
.avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .75rem; background: #888;
}
.avatar-grande { width: 56px; height: 56px; font-size: 1rem; }
.etiqueta-idioma { display: inline-block; font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 9px; margin: 1px 3px 1px 0; background: #eef1f6; color: var(--texto-suave); }
.etiqueta-idioma.nivel-A { background: var(--estado-confirmado-fondo); color: var(--primario); }
.texto-suave { color: var(--texto-suave); font-size: .85rem; font-weight: 400; }
.texto-aviso { color: var(--aviso); font-size: .85rem; }

.ficha-cabecera { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.ficha-cabecera h1 { margin: 0; font-size: 1.5rem; }
.ficha-cabecera p { margin: 4px 0 0; }
.interruptor-cabecera { margin-left: auto; background: var(--superficie); padding: 8px 12px; border-radius: var(--radio); border: 1px solid var(--borde); }

.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.tarjeta h2 { margin-bottom: 4px; }
.tarjeta h2:not(:first-child) { margin-top: 24px; }
.tarjeta > .texto-suave { margin: 0 0 14px; }
.tarjeta fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tarjeta fieldset > .casilla { align-self: flex-start; padding-bottom: 0; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.rejilla small { font-weight: 400; }
textarea { resize: vertical; }
input[type=color] { width: 64px; height: 38px; padding: 3px; cursor: pointer; }
.campo-error { border-color: var(--peligro) !important; background: #fff6f5; }
.ejemplo-calculo { font-size: .82rem; color: var(--texto-suave); background: var(--fondo); padding: 10px 12px; border-radius: 6px; }

.acciones-fijas { position: sticky; bottom: 0; background: var(--superficie); padding: 12px 0 0; margin-top: 16px; border-top: 1px solid var(--borde); align-items: center; }
.estado-guardado { margin-right: auto; color: var(--ok); font-weight: 600; }

.lista-idiomas, .lista-ausencias { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.idioma-fila, .ausencia-fila { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--fondo); border-radius: 6px; }
.ausencia-fila.pasada { opacity: .55; }
.crece { flex: 1; }
.fila-anadir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.fila-anadir label.crece { min-width: 200px; }
.boton-icono { border: 0; background: none; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--texto-suave); padding: 2px 6px; border-radius: 4px; }
.boton-icono:hover { background: var(--estado-cancelado-fondo); color: var(--peligro); }
.input-precio { width: 110px; text-align: right; }
.estado-celda { width: 30px; color: var(--ok); font-weight: 700; }

/* --- Clientes ------------------------------------------------------- */
.marca-color { flex: none; width: 12px; height: 34px; border-radius: 4px; background: #888; }
.marca-grande { width: 14px; height: 56px; }
.etiqueta { display: inline-block; font-size: .72rem; font-weight: 600; padding: 1px 8px; border-radius: 9px; margin: 1px 4px 1px 0; }
.etiqueta-aviso { background: var(--estado-opcion-fondo); color: var(--aviso); }
.etiqueta-info { background: #eef1f6; color: var(--texto-suave); }
.etiqueta-ok { background: var(--estado-realizado-fondo); color: var(--ok); }
.etiqueta-estado.estado-opcion { background: var(--estado-opcion-fondo); color: var(--aviso); }
.etiqueta-estado.estado-confirmado { background: var(--estado-confirmado-fondo); color: var(--primario); }
.etiqueta-estado.estado-realizado { background: var(--estado-realizado-fondo); color: var(--ok); }
.etiqueta-estado.estado-facturado { background: var(--estado-facturado-fondo); color: var(--texto-suave); }
.etiqueta-estado.estado-cancelado, .etiqueta-estado.estado-no_go { background: var(--estado-cancelado-fondo); color: var(--peligro); }

code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82em; background: #eef1f6; padding: 1px 5px; border-radius: 4px; color: #3a4556; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dos-columnas .tarjeta { margin-bottom: 16px; }
.dos-columnas > * { min-width: 0; }   /* sin esto los inputs ensanchan la columna */
.lista-simple { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fila-simple { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--fondo); border-radius: 6px; }
.fila-simple a { color: var(--texto); text-decoration: none; }
.fila-simple a:hover { color: var(--primario); text-decoration: underline; }
.columna-fecha { width: 92px; flex: none; }
.input-plano { border-color: transparent; background: transparent; padding: 4px 6px; }
.input-plano:hover:not(:disabled), .input-plano:focus { border-color: var(--borde); background: #fff; }
.rejilla-contacto { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rejilla-contacto input, .fila-anadir input.crece { min-width: 0; width: 100%; }
.rejilla-contacto button { grid-column: 1 / -1; justify-self: end; }
.celda-orden { width: 56px; white-space: nowrap; }
.celda-orden .boton-icono:disabled { visibility: hidden; }
.tabla-compacta input:not(.input-precio), .tabla-compacta select { width: 100%; }
.margen-arriba { margin-top: 12px; }
.boton-enlace-oscuro { background: none; border: 0; padding: 0; font: inherit; color: var(--primario); text-decoration: underline; cursor: pointer; }
.tarjeta-discreta { background: transparent; border-style: dashed; }

/* --- Tarifarios ----------------------------------------------------- */
.boton-peligro { color: var(--peligro); border-color: #efc4bf; }
.boton-peligro:hover { background: var(--estado-cancelado-fondo); border-color: var(--peligro); }
.acciones-cabecera { margin-left: auto; display: flex; gap: 8px; }
.tarifa-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tarjeta-cabecera { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.tarjeta-cabecera h2 { margin: 0; margin-right: auto; }
.tarjeta-cabecera input[type=search] { width: 280px; max-width: 100%; }
.tabla-lineas td { padding: 4px 4px; }
.tabla-lineas input, .tabla-lineas select { padding: 5px 6px; font-size: .82rem; width: 100%; min-width: 0; }
.tabla-lineas input[type=checkbox] { width: auto; }
.tabla-lineas .input-codigo { width: 96px; }
.tabla-lineas .input-nombre { min-width: 190px; }
.tabla-lineas .input-minutos { width: 66px; }
.tabla-lineas .input-precio { width: 86px; }
.tabla-lineas small { white-space: nowrap; }
.tabla-lineas tr.linea-hora_extra td { background: #fbfaf3; }
.tabla-lineas tr.linea-suplemento td, .tabla-lineas tr.linea-manual td { background: #f7f8fb; }
.rejilla-simulador { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.duracion { display: flex; align-items: center; gap: 4px; font-weight: 400; color: var(--texto); }
.duracion input { width: 62px; }
.sim-suplementos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; }
.sim-suplementos .casilla { padding: 0; }
.sim-resultado { margin-top: 14px; }
.sim-resultado .tabla { background: var(--fondo); border-radius: 6px; }
.fila-total td { font-weight: 700; border-top: 2px solid var(--borde); }
.fila-tarifario .texto-suave { font-size: .8rem; }

/* --- Ficha de trabajo ----------------------------------------------- */
.pagina-trabajo { max-width: 1320px; }
.trabajo-cabecera h1 { font-size: 1.45rem; }
.estados { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.estado-boton { font: inherit; font-size: .85rem; padding: 6px 14px; border-radius: 18px; cursor: pointer;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-suave); }
.estado-boton:hover:not(:disabled) { border-color: #b9c0cc; color: var(--texto); }
.estado-boton.activo { font-weight: 700; color: var(--texto); border-width: 2px; }
.estado-boton.estado-opcion.activo { background: var(--estado-opcion-fondo); border-color: var(--estado-opcion); }
.estado-boton.estado-confirmado.activo { background: var(--estado-confirmado-fondo); border-color: var(--estado-confirmado); }
.estado-boton.estado-realizado.activo { background: var(--estado-realizado-fondo); border-color: var(--estado-realizado); }
.estado-boton.estado-facturado.activo { background: var(--estado-facturado-fondo); border-color: var(--estado-facturado); }
.estado-boton.estado-cancelado.activo, .estado-boton.estado-no_go.activo { background: var(--estado-cancelado-fondo); border-color: var(--estado-cancelado); }
.aviso-info { background: var(--estado-facturado-fondo); color: var(--texto); margin-bottom: 16px; }
.aviso-aviso { background: var(--estado-opcion-fondo); color: #7a520f; margin: 8px 0 12px; }
.trabajo-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.trabajo-lateral .tarjeta { margin-bottom: 16px; }
.etiqueta-campo { display: block; font-weight: 600; font-size: .85rem; color: var(--texto-suave); margin-bottom: 4px; }
.idiomas-trabajo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip-idioma { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 14px; background: var(--estado-confirmado-fondo); font-size: .85rem; }
.chip-quitar.visible { opacity: 1; }
.anadir-idioma { display: inline-flex; align-items: center; gap: 4px; }
.anadir-idioma select { padding: 4px 6px; font-size: .85rem; }
.boton-pequeno { padding: 4px 10px; font-size: .85rem; }
.input-corto { width: 70px; }
.campo-falta { border-color: var(--aviso) !important; background: #fffaf0; }

.sesion-ficha { border: 1px solid var(--borde); border-radius: 10px; padding: 12px; margin-bottom: 12px; background: #fcfcfd; }
.sesion-ficha.cancelada { opacity: .65; background: repeating-linear-gradient(135deg, #fcfcfd, #fcfcfd 10px, #f5f5f7 10px, #f5f5f7 20px); }
.sesion-ficha-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sesion-ficha-cabecera input { padding: 5px 8px; }
.venta-sesion { margin-left: auto; font-size: .8rem; font-weight: 700; color: var(--texto-suave); background: #eef1f6; padding: 2px 8px; border-radius: 10px; }
.venta-sesion.con-aviso { color: var(--aviso); background: var(--estado-opcion-fondo); }
.sesion-ficha-detalle { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.sesion-ficha-detalle label { min-width: 120px; }
.sesion-ficha-detalle label.crece { min-width: 220px; }
.sesion-ficha-equipo { margin-top: 12px; }
.equipo-titulo { font-weight: 600; font-size: .85rem; color: var(--texto-suave); margin-bottom: 4px; display: flex; gap: 6px; align-items: center; }
.equipo-titulo .contador { margin-left: 0; }
.tabla-equipo td { vertical-align: middle; }
.tabla-equipo tr.interprete-rechazado td { opacity: .5; }
.tabla-equipo tr.interprete-rechazado a { text-decoration: line-through; }
.avatar-pequeno { width: 28px; height: 28px; font-size: .68rem; }
.aviso-si { color: var(--ok); }
.aviso-pendiente { color: var(--aviso); font-weight: 600; }
.aviso-no { color: var(--texto-suave); }
.asignar { margin-top: 8px; }
.asignar select { max-width: 100%; }

.tabla-venta input { padding: 5px 6px; font-size: .85rem; width: 100%; min-width: 0; }
.tabla-venta .input-codigo { width: 100px; }
.tabla-venta .input-corto { width: 64px; }
.tabla-venta .input-precio { width: 90px; }
.tabla-venta td.crece { min-width: 240px; }
.tabla-venta td.crece small { margin-left: 4px; }
.tabla-venta .importe { white-space: nowrap; font-weight: 600; }
.totales { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; max-width: 360px; margin: 16px 0 0 auto; }
.totales dt { color: var(--texto-suave); }
.totales dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.totales .total { font-weight: 700; color: var(--texto); font-size: 1.05rem; border-top: 1px solid var(--borde); padding-top: 4px; }
.totales .negativo { color: var(--peligro); font-weight: 700; }
.concepto-generado { font-weight: 600; background: var(--fondo); padding: 8px 10px; border-radius: 6px; margin: 0 0 12px; }
.historial { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: .85rem; max-height: 360px; overflow-y: auto; }
.pagina-trabajo.bloqueada .sesion-ficha, .pagina-trabajo.bloqueada .tabla-venta { opacity: .85; }

/* --- Avisos a intérpretes ------------------------------------------- */
.barra-avisos { font: inherit; background: rgba(255,255,255,.1); color: #fff; border: 0; border-radius: 6px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.barra-avisos:hover { background: rgba(255,255,255,.18); }
.contador-avisos { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: #f6c453; color: #1f2733; font-weight: 700; font-size: .78rem; text-align: center; }
.dialogo-avisos { width: min(760px, calc(100% - 24px)); }
.avisos-lista { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.avisos-interprete { border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; }
.avisos-cabecera { display: inline-flex; gap: 6px; padding: 0; }
.avisos-interprete .boton-enlace-oscuro { margin-left: 8px; font-size: .85rem; }
.avisos-items { list-style: none; margin: 6px 0 0; padding: 0 0 0 24px; font-size: .88rem; display: flex; flex-direction: column; gap: 4px; }
.aviso-tipo-asignacion { background: var(--estado-confirmado-fondo); color: var(--primario); }
.aviso-tipo-cambio { background: var(--estado-opcion-fondo); color: var(--aviso); }
.aviso-tipo-cancelacion { background: var(--estado-cancelado-fondo); color: var(--peligro); }
.avisos-opciones { display: flex; flex-direction: column; gap: 10px; }
.avisos-vista { margin-top: 12px; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; }
.avisos-vista-cabecera { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--fondo); }
.avisos-vista-cabecera .boton-icono { margin-left: auto; }
.avisos-vista iframe { width: 100%; height: 340px; border: 0; background: #fff; }

/* Página pública de respuesta del intérprete */
.pagina-respuesta { padding: 24px 16px; }
.caja-respuesta { max-width: 560px; margin: 0 auto; background: var(--superficie); border-radius: 12px; padding: 24px; box-shadow: var(--sombra); }
.caja-respuesta h1 { font-size: 1.3rem; }
.servicio { border: 1px solid var(--borde); border-radius: 10px; padding: 14px; margin: 12px 0; }
.servicio h2 { font-size: 1.05rem; margin-bottom: 4px; }
.servicio p { margin: 4px 0; }
.servicio.estado-confirmado { border-color: var(--estado-realizado); background: var(--estado-realizado-fondo); }
.servicio.estado-rechazado { opacity: .75; }
.servicio-estado { color: var(--texto-suave); }
.servicio-estado.cancelado { color: var(--peligro); font-weight: 600; }
.servicio-acciones { display: flex; gap: 8px; margin-top: 10px; }
.responder-todas { margin: 12px 0; }
.aviso-ok { background: var(--estado-realizado-fondo); color: var(--ok); }

/* --- Tareas --------------------------------------------------------- */
.pestanas { display: flex; gap: 4px; background: #e9ecf1; padding: 4px; border-radius: 8px; }
.pestana { font: inherit; border: 0; background: none; padding: 6px 14px; border-radius: 6px; cursor: pointer; color: var(--texto-suave); }
.pestana.activa { background: var(--superficie); color: var(--texto); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.grupos-tareas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 16px; align-items: start; }
.grupos-tareas > p { grid-column: 1 / -1; }
.grupo-tarea { margin-bottom: 0; }
.grupo-tarea h2 { font-size: 1.02rem; }
.contador-grupo { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 11px; background: #eef1f6; color: var(--texto-suave); font-size: .8rem; text-align: center; }
.grupo-avisos .contador-grupo, .grupo-incompletos .contador-grupo { background: #f6c453; color: #1f2733; }
.lista-tareas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.lista-tareas li { display: flex; flex-direction: column; padding: 6px 10px; border-radius: 6px; background: var(--fondo); border-left: 3px solid transparent; }
.lista-tareas li.urgente { border-left-color: var(--aviso); }
.lista-tareas a { color: var(--texto); font-weight: 600; text-decoration: none; }
.lista-tareas a:hover { color: var(--primario); text-decoration: underline; }
.tareas-vacio { font-size: 1.1rem; text-align: center; padding: 40px; color: var(--texto-suave); grid-column: 1 / -1; }
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 12px; background: var(--superficie); padding: 12px; border-radius: var(--radio); border: 1px solid var(--borde); }
.filtros label.crece { min-width: 220px; }
.filtros-acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.tabla-trabajos td { vertical-align: top; }
.tabla-trabajos tfoot td { font-weight: 700; border-top: 2px solid var(--borde); }
.nowrap { white-space: nowrap; }
.celda-referencias { font-size: .8rem; max-width: 220px; }

/* --- Asistente: referencias del cliente ----------------------------- */
.bloque-referencias { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; background: var(--fondo); border-radius: 8px; }
.bloque-referencias:empty { display: none; }
.bloque-referencias .obligatorio::after { content: ' *'; color: var(--peligro); }

/* --- Móvil / pantallas estrechas ------------------------------------ */
@media (max-width: 900px) {
  .barra { gap: 10px; padding: 0 10px; }
  .barra nav { overflow-x: auto; min-width: 0; scrollbar-width: none; }
  .barra nav::-webkit-scrollbar { display: none; }
  .barra nav a { white-space: nowrap; padding: 6px 8px; }
  .barra-nombre { display: none; }
  .calendario-layout { grid-template-columns: 1fr; grid-template-rows: 1fr 220px; }
  .panel-interpretes { border-left: 0; border-top: 1px solid var(--borde); }
  .leyenda-ayuda { display: none; }
  .fila-3 { grid-template-columns: 1fr 1fr; }
  .tabla th:nth-child(4), .tabla td:nth-child(4) { display: none; }
  .dos-columnas, .bloque-referencias, .tarifa-rejilla, .trabajo-rejilla { grid-template-columns: 1fr; }
}

/* --- Emails guardados / enviados --- */
.emails-rejilla { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 16px; align-items: start; }
.emails-lista-tarjeta { padding: 0; max-height: 75vh; overflow-y: auto; }
.emails-lista { list-style: none; margin: 0; padding: 0; }
.email-fila { padding: 10px 14px; border-bottom: 1px solid var(--borde); cursor: pointer; display: grid; gap: 4px; }
.email-fila:hover, .email-fila:focus { background: #f5f7fb; outline: none; }
.email-fila.activo { background: #e8eefc; }
.email-fila.con-error { border-left: 3px solid var(--aviso); }
.email-fila-arriba { display: flex; justify-content: space-between; gap: 8px; }
.email-fila-asunto { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emails-lista > li.texto-suave { padding: 14px; }
.email-cabecera { display: grid; gap: 4px; margin-bottom: 10px; overflow-wrap: anywhere; }
#email-marco { width: 100%; height: 65vh; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; }
@media (max-width: 800px) {
  .emails-rejilla { grid-template-columns: 1fr; }
  .emails-lista-tarjeta { max-height: 40vh; }
}

/* --- Usuarios --- */
.tarjeta-estrecha { max-width: 480px; margin-top: 24px; }
.campo-con-boton { display: flex; gap: 8px; }
.campo-con-boton input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; }
.fila-inactiva td { color: var(--texto-suave); }
.acciones-fila { display: flex; gap: 12px; justify-content: flex-end; }
a.barra-nombre { color: inherit; text-decoration: none; }
a.barra-nombre:hover { text-decoration: underline; }

/* --- Importar email (.eml) --- */
.boton-fichero { cursor: pointer; }
.calendario-principal { position: relative; }
.soltar-eml { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: rgba(36, 87, 197, .12); border: 3px dashed var(--primario, #2457c5); border-radius: var(--radio);
  font-size: 1.2rem; font-weight: 600; color: var(--primario, #2457c5); pointer-events: none; }
.soltar-eml[hidden] { display: none; }
.bloque-email { background: #f3f6fc; border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 12px; margin-bottom: 12px; font-size: .9rem; overflow-wrap: anywhere; }
.bloque-email p { margin: 0 0 4px; }
.bloque-email-avisos { margin: 4px 0; padding-left: 18px; color: var(--aviso); }
.bloque-email-avisos:empty { display: none; }
.bloque-email details { margin-top: 6px; }
.bloque-email table th { text-align: left; font-weight: 500; color: var(--texto-suave); white-space: nowrap; padding-right: 10px; }

/* --- Importar Excel --- */
.zona-subida { text-align: center; padding: 40px 20px; border: 2px dashed var(--borde); }
.zona-subida.encima { border-color: var(--primario); background: #f3f6fc; }
.zona-subida.cargando { opacity: .6; pointer-events: none; }
.resumen-importacion { font-weight: 600; margin: 0 0 12px; }
.equivalencias-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px 32px; }
.equivalencias-rejilla h3 { font-size: 1rem; margin: 4px 0 8px; }
.equivalencia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 4px 10px; align-items: center; margin-bottom: 8px; }
.equivalencia input { grid-column: 2; }
#equivalencias { margin-bottom: 16px; }
.tabla-importar td { vertical-align: middle; }
.tabla-importar input[type=time] { width: 100px; }
.tabla-importar .input-titulo { min-width: 220px; width: 100%; }
.tabla-importar select { min-width: 120px; max-width: 200px; }
.fila-excluida td { opacity: .5; }
.fila-excluida td:first-child { opacity: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 3px; }
.chips .chip { --color-interprete: var(--primario); font-size: .78rem; padding: 1px 6px; }
.chips .chip-falta { --color-interprete: var(--aviso); border-style: dashed; }
.sin-salto { white-space: nowrap; }
td.numero { text-align: right; white-space: nowrap; }
.notas-fila { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; min-width: 140px; }
.barra-importar { position: sticky; bottom: 0; display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  padding: 12px 0; background: var(--fondo, #f4f5f7); border-top: 1px solid var(--borde); margin-top: 12px; }
.barra-importar span { margin-right: auto; }

/* --- Marca: logotipo y nombre --- */
.marca { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.marca img { height: 32px; width: auto; max-width: 140px; object-fit: contain; display: block; }
.marca-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-acceso { display: block; max-height: 72px; max-width: 240px; object-fit: contain; margin: 0 auto 8px; }
.subnav { display: flex; gap: 4px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 3px; }
.subnav a { padding: 6px 12px; border-radius: 6px; text-decoration: none; color: var(--texto); font-size: .9rem; }
.subnav a.activo { background: var(--primario); color: #fff; }
.ajustes-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.logo-vista { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 16px; margin-bottom: 8px;
  border-radius: var(--radio); background: repeating-conic-gradient(#eef0f4 0% 25%, #fff 0% 50%) 50% / 16px 16px; }
.logo-vista img { max-height: 100px; max-width: 100%; object-fit: contain; }
.barra-muestra { position: static; border-radius: var(--radio); max-width: 480px; }
@media (max-width: 900px) { .marca img + .marca-nombre { display: none; } }

/* --- Funciones en desarrollo --- */
.boton-pronto { border-style: dashed; color: var(--texto-suave); cursor: help; }
.etiqueta-pronto { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; margin-left: 4px;
  border-radius: 8px; background: #fff4d6; color: #8a5a00; vertical-align: middle; }

/* --- Presupuestos --- */
.opciones-formato { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-bottom: 12px; }
.opciones-formato .casilla { align-items: flex-start; padding: 10px; border: 1px solid var(--borde); border-radius: var(--radio); font-weight: 400; }
.opciones-formato .casilla:has(input:checked) { border-color: var(--primario); background: #f3f6fc; }
.opciones-formato input { margin-top: 3px; }
.lista-avisos { margin: 0 0 10px; padding-left: 18px; color: var(--aviso); font-size: .9rem; }
.lista-avisos:empty { display: none; }
#dialogo-presupuesto table th { text-align: left; font-weight: 500; color: var(--texto-suave); white-space: nowrap; padding-right: 10px; }

/* =====================================================================
   Tamaño de letra de cada usuario (Aa en la barra). Todo va en rem,
   así que basta con cambiar la base.
   ===================================================================== */
html[data-letra="grande"] { font-size: 16px; --barra-alto: 56px; }
html[data-letra="muy_grande"] { font-size: 18px; --barra-alto: 60px; }

.barra { position: relative; }
.barra-menu, .solo-movil { display: none; }
.barra-letra { position: relative; }
#boton-letra { font: inherit; font-weight: 700; background: rgba(255,255,255,.1); color: #fff; border: 0; border-radius: 6px; padding: 6px 10px; cursor: pointer; line-height: 1; }
#boton-letra small { font-size: .7em; }
#boton-letra:hover, #boton-letra[aria-expanded="true"] { background: rgba(255,255,255,.2); }
.menu-letra { position: absolute; right: 0; top: calc(100% + 8px); z-index: 120; display: flex; flex-direction: column; min-width: 170px;
  background: var(--superficie); color: var(--texto); border-radius: 10px; box-shadow: var(--sombra); padding: 6px; }
.menu-letra span { font-size: .78rem; color: var(--texto-suave); padding: 4px 10px 6px; }
.menu-letra button { font: inherit; text-align: left; background: none; border: 0; border-radius: 6px; padding: 8px 10px; cursor: pointer; color: var(--texto); }
.menu-letra button:hover { background: var(--fondo); }
.menu-letra button.activo { background: var(--estado-confirmado-fondo); font-weight: 600; }
.menu-letra button[data-letra="grande"] { font-size: 1.12em; }
.menu-letra button[data-letra="muy_grande"] { font-size: 1.25em; }

/* Con letra grande en pantallas medianas el menú no cabe entero: se pliega igual que en móvil */
@media (max-width: 1250px) { html[data-letra="muy_grande"] .barra-nombre { display: none; } }

/* =====================================================================
   Móvil y tableta
   ===================================================================== */
@media (max-width: 900px) {
  /* Barra: logotipo · ☰ Menú · Aa · Avisos · Salir; el menú se despliega debajo */
  .barra { gap: 8px; padding: 0 10px; }
  .marca { flex: 0 1 auto; min-width: 0; }
  .barra-menu { display: inline-flex; align-items: center; gap: 6px; font: inherit; background: rgba(255,255,255,.1); color: #fff; border: 0; border-radius: 6px; padding: 6px 10px; cursor: pointer; white-space: nowrap; margin-right: auto; }
  .barra.menu-abierto .barra-menu { background: rgba(255,255,255,.22); }
  .barra nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 110; flex-direction: column; gap: 2px;
    overflow: visible; padding: 8px 10px 12px; background: #16213a; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
  .barra.menu-abierto nav { display: flex; }
  .barra nav a { padding: 12px 12px; font-size: 1.05rem; white-space: normal; }
  .barra nav .solo-movil { display: block; border-top: 1px solid rgba(255,255,255,.12); margin-top: 4px; padding-top: 14px; }
  .barra-avisos { padding: 6px 10px; }
}

@media (max-width: 700px) {
  :root { font-size: 15px; }
  /* El iPhone amplía la página al tocar un campo con letra de menos de 16 px */
  input, select, textarea { font-size: max(16px, 1rem); }

  .pagina { padding: 14px 12px 60px; }
  .tarjeta { padding: 14px; border-radius: 10px; }
  .pagina-cabecera h1, .ficha-cabecera h1, .trabajo-cabecera h1 { font-size: 1.3rem; }

  /* Cabecera de las fichas: título arriba, botones debajo repartidos a lo ancho */
  .ficha-cabecera { flex-wrap: wrap; gap: 10px; }
  .ficha-cabecera > .crece, .ficha-cabecera > div:first-of-type { min-width: 0; }
  .acciones-cabecera { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .acciones-cabecera > .boton, .acciones-cabecera > a.boton { flex: 1 1 auto; justify-content: center; text-align: center; }
  .interruptor-cabecera { margin-left: 0; }

  .fila-2 { grid-template-columns: 1fr; }
  .rejilla { grid-template-columns: 1fr; }
  .tabla th, .tabla td { padding: 9px 10px; }

  .dialogo { padding: 18px 16px; width: calc(100% - 16px); max-height: calc(100% - 16px); }
  .dialogo .acciones { flex-wrap: wrap; }
  .dialogo .acciones .boton { flex: 1 1 auto; }

  /* Calendario: sin leyenda, barra de botones compacta y más alto para las sesiones */
  .calendario-layout { grid-template-rows: minmax(0, 1fr) 170px; }
  .leyenda { margin-bottom: 6px; }
  .leyenda-item { display: none; }
  .leyenda .boton-fichero { margin-left: auto; }
  .fc .fc-toolbar.fc-header-toolbar { flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
  .fc .fc-toolbar-title { font-size: 1.05rem; }
  .fc .fc-button { padding: .35em .6em; font-size: .9rem; }
  .calendario-principal { padding: 8px; }
}
@media (max-width: 900px) {
  /* «1fr» deja que el contenido más ancho estire la columna; minmax(0, 1fr) no */
  .trabajo-rejilla, .dos-columnas, .tarifa-rejilla { grid-template-columns: minmax(0, 1fr); }
  .trabajo-rejilla > *, .dos-columnas > * { min-width: 0; }
}
@media (max-width: 700px) {
  /* Tablas dentro de tarjetas: se desplazan a lo ancho en vez de salirse */
  .tarjeta table.tabla { display: block; max-width: 100%; overflow-x: auto; }
}
/* Un desplegable con opciones largas no debe ensanchar su tarjeta */
select { max-width: 100%; }
@media (max-width: 700px) { #extra-tarifa { width: 100%; min-width: 0; flex: 1 1 100%; } }
.barra-nombre { white-space: nowrap; }

/* --- Avisos por WhatsApp --- */
.etiqueta-whatsapp { background: #e7f8ee; color: #128c4a; }
.avisos-canales { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.boton-whatsapp { background: #25d366; border-color: #1fb457; color: #fff; text-decoration: none; }
.boton-whatsapp:hover { background: #1fb457; color: #fff; }
.boton-whatsapp.abierto { background: #e7f8ee; color: #128c4a; }
.avisos-whatsapp { border: 1px solid #b7ecd0; background: #f4fcf7; border-radius: var(--radio); padding: 10px 14px; margin: 10px 0; }
.avisos-whatsapp h3 { margin: 0 0 4px; font-size: 1rem; }
.avisos-whatsapp ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vista-whatsapp { white-space: pre-wrap; font-family: inherit; background: #e7f8ee; border-radius: 8px; padding: 10px 12px; margin: 0; }
.avisos-acciones { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.boton-whatsapp:disabled { background: #e9ecef; border-color: #dfe3e8; color: #8a94a6; cursor: not-allowed; }
.avisos-copiar { border: 1px solid #b7ecd0; background: #f4fcf7; border-radius: var(--radio); padding: 10px 14px; margin: 10px 0; }
.avisos-copiar h3 { margin: 0 0 8px; font-size: 1rem; }
.avisos-copiar textarea { width: 100%; font-family: inherit; background: #fff; }

/* --- Calendarios: agencia / personal --- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.selector-calendario select { font: inherit; font-weight: 600; padding: 5px 30px 5px 10px; border-radius: 8px; border: 1px solid var(--borde); background-color: var(--superficie); max-width: 280px; }
.calendario-principal[data-vista="ajeno"] .selector-calendario select,
.calendario-principal[data-vista="mio"] .selector-calendario select { border-color: #7c5cbf; background-color: #f1ecfa; }
.calendario-principal[data-vista="ambos"] .selector-calendario select { border-color: var(--primario); }
.fc-event.personal { --borde-estado: #7c5cbf; --fondo-estado: #f1ecfa; }
.fc-event.personal-personal { --borde-estado: #8a94a6; --fondo-estado: #eef0f3; background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.04) 6px 12px); }
.sesion-personal .sesion-propuesta { color: #6b4fb0; }
.acciones-columna { flex-direction: column; align-items: stretch; }
@media (max-width: 700px) { .selector-calendario { flex: 1 1 100%; } .selector-calendario select { width: 100%; max-width: none; } }
.fc-timegrid-event.personal-personal, .fc-daygrid-event.personal-personal {
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.05) 6px 12px), #eef0f3 !important; }
.fc-event.personal.con-choque { --borde-estado: var(--peligro); outline: 2px solid var(--peligro); outline-offset: -1px; }
.sesion-personal .sesion-propuesta.con-aviso { color: var(--peligro); }
/* Con calendario propio, los servicios de la agencia dejan libre una franja a la
   derecha de cada día para poder arrastrar y apuntar algo a esa misma hora */
.calendario-principal[data-vista="mio"] .fc-timegrid-col-events,
.calendario-principal[data-vista="ambos"] .fc-timegrid-col-events { margin-right: 22%; }
.calendario-principal[data-vista="mio"] .fc-timegrid-col,
.calendario-principal[data-vista="ambos"] .fc-timegrid-col { background-image: linear-gradient(90deg, transparent 78%, rgba(124, 92, 191, .05) 78%); }
.boton-propio { border-color: #7c5cbf; color: #6b4fb0; }