/*==============================================================================
  ROSSA UI — Centralized design system (override-first)
  ------------------------------------------------------------------------------
  Single source of truth for the redesigned look. Loaded LAST in every entry
  point so it overrides legacy CSS (lydia.css, rossa_simple_table.css, etc.).
  Legacy rules are removed incrementally AFTER visual parity is confirmed.

  Colors sampled directly from RossaRedisign.fig screen exports.
  No build step (XAMPP) -> one hand-authored, comment-sectioned file.

  SECTIONS
    1. Tokens (:root)
    2. Base / typography
    3. Buttons (.admin_boton + modifiers) + legacy specificity busters
    4. Forms / inputs / selects
    5. Tags / pills
    6. Tables
    7. Cards
    8. Payment / status utilities
    9. Section headings
   10-43. Global chrome + per-screen sections (banners inline, numbered)
   44. Avisos (campanita del toolbar + panel + página module=avisos)
   45. Políticas de cancelación (listado / edición / reglas)
   46. Planes / tarifas (fees, price_plans, restriction_plans, boards, fee_edit)
   50. Uso de la interfaz (module=uso_botones) — contadores de pulsaciones
  61. Config módulo facturación — pestaña AEAT NIF (VNifV2)
  62. Panel SAT Estado Verifactu (fcts02:verifactuVisor)
==============================================================================*/

/*------------------------------------------------------------------ 1. TOKENS */
:root {
  /* Brand (reused from existing palette — sampled values matched these) */
  --rossa-teal:        #005e66;  /* primary accent: headings, links, primary btn */
  --rossa-teal-600:    #0c5b63;
  --rossa-red:         #e7004c;  /* brand red: filter pills, danger emphasis */

  /* New tokens introduced by the redesign */
  --rossa-cyan:        #17799b;  /* links, table row left-accent */
  --rossa-ink:         #16292d;  /* headings & body text (near-black petrol) */
  --rossa-coral:       #ea5c36;  /* warning / payment-due */
  --rossa-salmon:      #fcece8;  /* destructive / unpaid background */
  --rossa-surface:     #eceff1;  /* default buttons, table rows */
  --rossa-surface-2:   #f0f4f4;  /* page-ish light background */
  --rossa-border:      #d8dede;
  --rossa-muted:       #677074;  /* secondary text */
  --rossa-white:       #ffffff;
  --rossa-green:       #19ac8a;  /* positive amount ("total pagado") */

  /* Figma RossaRedisign.fig — exact values (decoded from canvas.fig).
     Added alongside (not replacing) the sampled tokens above so existing
     consumers keep their colors; new Figma-faithful sections use these. */
  --rossa-petrol:      #205c68;  /* inputs, labels, secondary/dark buttons */
  --rossa-petrol-dark: #03424e;  /* petrol button hover */
  --rossa-navy:        #00303c;  /* H1 / tab text */
  --rossa-zebra:       rgba(32, 92, 104, .05);  /* even-row tint (Figma zebra) */
  --rossa-deep:        #003846;  /* section headings, footer text */
  --rossa-green-fig:   #00a886;  /* ENTRADAS/SALIDAS heading + underline, small primary buttons */
  --rossa-green-dark:  #04604b;  /* green button hover (Figma "Default 12 Hover") */
  --rossa-red-dark:    #c1003f;  /* brand-red button hover */
  --rossa-cyan-fig:    #00a8d2;  /* client-name links (Figma cards/tables) */
  --rossa-strip:       #eff2f3;  /* card header strip / message background */
  --rossa-hairline:      rgba(32, 92, 104, .45);  /* 0.5px petrol strokes in Figma */
  --rossa-hairline-soft: rgba(32, 92, 104, .18);  /* row separators */
  --rossa-tint:          rgba(32, 92, 104, .04);  /* airy petrol wash — replaces flat #efefef blocks */

  /* Shape & elevation */
  --rossa-radius:      8px;
  --rossa-radius-pill: 999px;
  --rossa-shadow:      0 1px 3px rgba(20, 40, 60, .12), 0 1px 2px rgba(20, 40, 60, .06);
  --rossa-font:        'Work Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/*-------------------------------------------------------- 2. BASE / TYPOGRAPHY */
/* Scoped to admin shell so we don't restyle bare elements on bespoke guest
   pages. Building-block classes below are global by design. */

/*------------------------------------------------------------------ 3. BUTTONS
  .admin_boton is the PRIMARY action button (Añadir, Volver, Guardar) -> teal,
  matching the Figma. Secondary actions use white-outline classes (see §13).
  .admin_boton--danger = destructive (salmon/coral). Loaded last -> beats lydia. */
.admin_boton {
  background-color: var(--rossa-teal);
  color: var(--rossa-white);
  border: 1px solid var(--rossa-teal);
  font-family: var(--rossa-font);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  padding: 9px 16px;
  border-radius: var(--rossa-radius);
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none !important;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.admin_boton:hover {
  background-color: #00474d;
  border-color: #00474d;
}
.admin_boton:active { background-color: #003a40; }
.admin_boton:disabled,
.admin_boton[disabled] {
  color: #9aa3a3;
  background-color: #f2f4f5;
  border-color: var(--rossa-border);
  cursor: not-allowed;
}
/* Specificity buster: lydia `input.admin_boton, button.admin_boton {padding:5px 10px}`
   (0,1,1) deja los <input>/<button> más bajos que los <a>; igualamos su caja para que
   en botoneras mixtas (p. ej. Enviar + Volver en send_mail_module) tengan la misma altura. */
input.admin_boton,
button.admin_boton {
  padding: 9px 16px;
  line-height: 1.25;
}

/* Botonera horizontal centrada (Volver a la izq. + Enviar a la dcha. en send_mail_module). */
#contenido_admin .rossa-btn-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* lydia da a .admin_boton margin-left/right:auto; dentro de un flex esos márgenes auto
   absorben el espacio libre y empujan los botones a los extremos, anulando justify-content. */
#contenido_admin .rossa-btn-bar .admin_boton {
  margin-left: 0;
  margin-right: 0;
}

/* Primary (teal) — e.g. "Filtrar" */
.admin_boton--primary {
  background-color: var(--rossa-teal);
  border-color: var(--rossa-teal);
  color: var(--rossa-white);
}
.admin_boton--primary:hover {
  background-color: #00474d;
  border-color: #00474d;
}
.admin_boton--primary.boton_rojo { background-color: var(--rossa-teal) !important; }
.admin_boton--primary.boton_rojo:hover { background-color: #00474d !important; }
/* Deshabilitado: gris apagado (vence al teal !important del buster de arriba). */
.admin_boton--primary.boton_rojo:disabled,
.admin_boton--primary.boton_rojo[disabled] {
  background-color: #f2f4f5 !important;
  color: #9aa3a3;
  border-color: var(--rossa-border);
  cursor: not-allowed;
}

/* Destructive — e.g. "Cancelar reserva" */
.admin_boton--danger {
  background-color: var(--rossa-salmon);
  border-color: #f6d6cd;
  color: var(--rossa-coral);
}
.admin_boton--danger:hover { background-color: #fbe0d8; }
/* boton_rojo (lydia, fondo naranja !important) gana a --danger; lo neutralizamos
   donde conviven ambos (p. ej. "Eliminar" en price_plans / restriction_plans). */
.admin_boton--danger.boton_rojo { background-color: var(--rossa-salmon) !important; }
.admin_boton--danger.boton_rojo:hover { background-color: #fbe0d8 !important; }
/* price_plans / restriction_plans: Editar y Eliminar (float:right) quedan pegados;
   pequeño margen para separarlos. */
#contenido_admin [id^="price_plan_"] .admin_boton,
#contenido_admin [id^="restriction_plan_"] .admin_boton {
  margin-left: 8px;
}
/* add_reserva (fila de tarifas, col precio/hab): el nº quedaba pegado al € y el
   icono info caía debajo del input (td estrecho lo envolvía). Input + icono en
   línea (icono a la derecha) y más aire entre el número y el €. */
#contenido_admin .col_precio_hab { white-space: nowrap; }
#contenido_admin .col_precio_hab .casilla_precio,
#contenido_admin .col_precio_hab .desglose {
  display: inline-block;
  vertical-align: middle;
}
#contenido_admin .col_precio_hab .desglose { margin-left: 8px; }
/* Inputs de precio (disponibilidad step 1 + precios de servicios step 2): la regla
   §18 los estira a 320px con el € en PNG (euro15.png). Ancho fijo, número a la
   derecha e icono euro del cdn — coherente en todos. */
#contenido_admin .precio_por_hab {
  display: inline-block;
  width: 96px;
  max-width: 96px;
  text-align: right;
  padding-right: 26px;
  background-image: url("https://cdn.rossa.app/icons/euro.svg");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 12px 12px;
}

/* Secondary — blanco + borde (p. ej. "Resetear" en gestor_huespedes). */
.admin_boton--secondary {
  background-color: var(--rossa-white) !important;
  border-color: var(--rossa-border);
  color: var(--rossa-ink);
}
.admin_boton--secondary:hover {
  background-color: var(--rossa-surface) !important;
  border-color: #c7cfcf;
}
.admin_boton--secondary:disabled,
.admin_boton--secondary[disabled] {
  background-color: #f2f4f5 !important;
  color: #9aa3a3;
  border-color: var(--rossa-border);
  cursor: not-allowed;
}

/* --- Legacy specificity busters -------------------------------------------
   These match (or exceed) the specificity of legacy compound selectors so the
   new look wins regardless of source order. Remove together with the legacy
   rule they neutralize during cleanup. */
table.rossa_table_estandar .admin_boton {           /* was #1bad89, radius 15px */
  background-color: var(--rossa-teal);
  color: var(--rossa-white);
  border: 1px solid var(--rossa-teal);
  border-radius: var(--rossa-radius);
}
table.rossa_table_estandar .admin_boton.admin_boton--primary {
  background-color: var(--rossa-teal);
  color: var(--rossa-white);
  border-color: var(--rossa-teal);
}
#field_reg .admin_boton {                            /* was solid red register btn */
  background-color: var(--rossa-teal);
  color: var(--rossa-white);
  border-color: var(--rossa-teal);
}

/*-------------------------------------------------- 4. FORMS / INPUTS / SELECTS
  Redesign: pill-shaped inputs. Scoped to .rossa_table_estandar and an opt-in
  .rossa-field wrapper so we don't restyle every input on guest pages. */
.rossa-field input[type="text"],
.rossa-field input[type="number"],
.rossa-field input[type="email"],
.rossa-field input[type="date"],
.rossa-field input[type="search"],
.rossa-field select,
table.rossa_table_estandar input,
table.rossa_table_estandar select {
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius-pill);
  background-color: var(--rossa-white);
  color: var(--rossa-ink);
  font-family: var(--rossa-font);
  font-size: 14px;
  padding: 8px 14px;
  box-sizing: border-box;
}
.rossa-field input:focus,
.rossa-field select:focus {
  outline: none;
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .15);
}

/*------------------------------------------------------------- 5. TAGS / PILLS
  Fully-rounded small labels (status, json_inicial, filter chips). */
.rossa-tag {
  display: inline-block;
  font-family: var(--rossa-font);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  padding: 6px 12px;
  border-radius: var(--rossa-radius-pill);
  background-color: var(--rossa-surface);
  color: var(--rossa-ink);
  border: 1px solid var(--rossa-border);
}
.rossa-tag--teal   { background-color: var(--rossa-teal); color: #fff; border-color: var(--rossa-teal); }
.rossa-tag--red    { background-color: var(--rossa-red);  color: #fff; border-color: var(--rossa-red);  }
.rossa-tag--cyan   { background-color: var(--rossa-cyan); color: #fff; border-color: var(--rossa-cyan); }
.rossa-tag--gray   { background-color: #b8bdbd;           color: #fff; border-color: #b8bdbd; }
.rossa-tag--coral  { background-color: var(--rossa-coral);color: #fff; border-color: var(--rossa-coral);}

/*----------------------------------------------------------------- 6. TABLES
  IMPORTANT: the new separated-row / left-accent LAYOUT is opt-in via .rossa-table
  only — legacy tables (table.rossa_table_estandar, table.t_notificaciones) were
  NOT built for separated borders, so applying the structural look globally would
  break them. For those we only do SAFE cosmetic overrides (link/text color).
  Per-screen migration: add class="rossa-table" to a <table> to adopt the new look. */

/* -- Opt-in modern table (full redesign look) -- */
.rossa-table {
  font-family: var(--rossa-font);
  border-collapse: separate;
  border-spacing: 0 6px;
  width: 100%;
  background-color: transparent;
  color: var(--rossa-ink);
}
.rossa-table thead th {
  background-color: transparent;
  color: var(--rossa-ink);
  font-weight: 700;
  text-align: left;
  padding: 8px 12px;
  border: 0;
}
.rossa-table tbody td {
  background-color: var(--rossa-surface);
  padding: 14px 12px;
  border: 0;
  vertical-align: middle;
}
.rossa-table tbody tr td:first-child {
  border-left: 4px solid var(--rossa-cyan);
  border-top-left-radius: var(--rossa-radius);
  border-bottom-left-radius: var(--rossa-radius);
}
.rossa-table tbody tr td:last-child {
  border-top-right-radius: var(--rossa-radius);
  border-bottom-right-radius: var(--rossa-radius);
}
/* Date-group header row (e.g. "08-08-2025") */
.rossa-table__group td,
.rossa-table tr.group td {
  background-color: var(--rossa-surface-2) !important;
  border-left: 0 !important;
  color: var(--rossa-ink);
  font-weight: 700;
  padding: 4px 12px;
}
/* Text links (booking nº, client name) — Figma cyan #00a8d2, Regular weight.
   Button-like anchors are excluded so .rossa-btn/.admin_boton keep white text
   (this selector outranks .rossa-btn by specificity otherwise). */
.rossa-table a:not(.rossa-btn):not(.rossa-btn-negative):not(.admin_boton) {
  color: var(--rossa-cyan-fig);
  font-weight: 400;
  text-decoration: none;
}
.rossa-table a:not(.rossa-btn):not(.rossa-btn-negative):not(.admin_boton):hover { text-decoration: underline; }

/* -- Safe cosmetic-only overrides for existing legacy tables (no layout change) -- */
table.rossa_table_estandar { color: var(--rossa-ink); }
table.rossa_table_estandar thead tr.cab td { color: var(--rossa-ink); }
table.rossa_table_estandar a:not(.admin_boton):not(.rossa-btn):not(.rossa-btn-negative):not(.back_button),
table.t_notificaciones a:not(.admin_boton):not(.rossa-btn):not(.rossa-btn-negative) { color: var(--rossa-cyan-fig); font-weight: 400; }

/*------------------------------------------------------------------- 7. CARDS */
.rossa-card {
  background-color: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-shadow: var(--rossa-shadow);
  padding: 18px 20px;
}
.rossa-card--empty {                 /* dashed empty-state, e.g. "No hay pagos" */
  border-style: dashed;
  border-color: var(--rossa-border);
  box-shadow: none;
  text-align: center;
  color: var(--rossa-muted);
}
.rossa-card__title { color: var(--rossa-teal); font-weight: 700; }
.rossa-card__value { color: var(--rossa-ink);  font-weight: 700; font-size: 24px; }

/*----------------------------------------------------- 8. PAYMENT / STATUS UTILS */
.rossa-status-box {                  /* salmon "NO PAGADO" block */
  background-color: var(--rossa-salmon);
  color: var(--rossa-coral);
  border-radius: var(--rossa-radius);
  padding: 14px 16px;
  font-weight: 700;
}
.rossa-amount-bar {                  /* filled "Restante a pagar" bar */
  background-color: var(--rossa-coral);
  color: var(--rossa-white);
  border-radius: var(--rossa-radius);
  padding: 10px 14px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}
.rossa-amount--paid { color: var(--rossa-green); font-weight: 700; }
.rossa-amount--due  { color: var(--rossa-coral); font-weight: 700; }

/*--------------------------------------------------------- 9. SECTION HEADINGS */
.rossa-heading {                     /* teal centered sub-section heading */
  color: var(--rossa-teal);
  font-family: var(--rossa-font);
  font-weight: 700;
  text-align: center;
}
.rossa-heading--main {               /* navy left-aligned main heading */
  color: var(--rossa-ink);
  text-align: left;
  font-size: 22px;
}

/*=============================================================================
  10. GLOBAL CHROME  (sidebar + page background + content header)
  ---------------------------------------------------------------------------
  EXTRAPOLATED beyond the Figma (which only drew content panels): applies the
  design language — light surfaces, ink text, teal accents — to the app frame.
  All selectors are #menu/body-scoped so they cleanly override lydia.css by both
  specificity and load order, and the whole section can be deleted to revert.
=============================================================================*/

/* Page background: white (no grey) */
body { background-color: var(--rossa-white); }

/* --- Sidebar: navy -> light --- */
#menu {
  background: var(--rossa-white);
  border-right: 1px solid var(--rossa-border);
  height: calc(100vh - 72px - 48px);
  padding-bottom: 12px;
  min-height: 0;
  top: 72px;
  margin-top: 0;
  z-index: 200;
}
#toplydia { z-index: 250; }
/* Con el menú colapsado el footer se oculta: el raíl recupera la altura */
body.showhidemenu #menu { height: calc(100vh - 72px); }
@media (max-width: 700px) {
  /* Off-canvas móvil: solo despeja el toolbar (48px) */
  #menu { top: 48px; height: calc(100vh - 48px); }
  body.showhidemenu #menu { top: 48px; height: calc(100vh - 48px); }
  #menu { z-index: 260; }
}
#menu::-webkit-scrollbar              { background-color: var(--rossa-white); }
#menu::-webkit-scrollbar-track        { background-color: var(--rossa-white); }
#menu::-webkit-scrollbar-thumb        { background-color: var(--rossa-teal); }  /* idle: teal claro */
#menu::-webkit-scrollbar-thumb:hover  { background-color: #00474d; }            /* hover: teal oscuro */
/* Firefox (no hover state on scrollbars) */
#menu { scrollbar-color: var(--rossa-teal) var(--rossa-white); }

/* Logo is a red mark — visible on white, no plate needed */
#menu #capa_logo { background: transparent; }

/* Menu item text + icons */
#menu .panel_admin a,
#menu .panel_admin a.menugroup,
#menu .panel_admin a .txtmenu,
#menu .panel_admin a.menugroup .txtmenu {
  color: var(--rossa-ink);
}
#menu .panel_admin a i,
#menu .panel_admin a.menugroup i { color: var(--rossa-teal) !important; }

/* Hover: subtle surface, ink text, teal accent edge */
#menu .panel_admin li a:hover,
#menu .panel_admin li a.menugroup:hover {
  background: var(--rossa-surface);
  color: var(--rossa-ink);
  border-left: 3px solid var(--rossa-teal);
}

/* Active item: subtle teal tint + teal text + teal left bar (not a heavy fill) */
#menu .panel_admin li a.currmenu,
#menu .panel_admin li a.menugroup.currmenu {
  background: rgba(0, 94, 102, .10);
  color: var(--rossa-teal);
  border-left: 3px solid var(--rossa-teal);
}
#menu .panel_admin li a.currmenu i,
#menu .panel_admin li a.menugroup.currmenu i { color: var(--rossa-teal) !important; }

/* La marca (tile teal) de un grupo de 1er nivel la lleva SOLO el grupo abierto
   (.rossa-open). Lydia añade `currmenu` a cada grupo que se clica y se iría
   acumulando en varios iconos; aquí le quitamos el tile a ese currmenu de 1er
   nivel y se lo damos al grupo realmente abierto. (Los submenús/hojas internas
   conservan su currmenu, no están bajo `> li > a.menugroup`.) */
#menu .panel_admin > li > a.menugroup.currmenu { background: transparent; border-left: 0; }
#menu .panel_admin > li.rossa-open > a.menugroup {
  background: rgba(0, 94, 102, .10);
  border-left: 3px solid var(--rossa-teal);
  color: var(--rossa-teal);
}
#menu .panel_admin > li.rossa-open > a.menugroup i { color: var(--rossa-teal) !important; }

/* Expanded submenu: crimson + red inset shadow -> clean transparent panel */
#menu .menugroupitems {
  background-color: var(--rossa-surface);   /* panel gris-azulado de los hijos expandidos (Figma) */
  border-left: 0 !important;
  box-shadow: none;           /* removes the inset #9A163F red glow */
  margin-bottom: 6px;
}
#menu .menugroupitems li a:hover,
#menu .menugroupitems li a.currmenu {
  background: rgba(0, 94, 102, .10);
  color: var(--rossa-teal);
}
#menu .menugroupitems li a:hover i,
#menu .menugroupitems li a.currmenu i { color: var(--rossa-teal) !important; }

/* 2nd-level collapsible sub-menus (addSubMenu): a header inside a group that
   expands its own list. Distinct classes so the legacy 1st-level toggle JS
   (which targets .menugroupitems) leaves them alone; a small script in menu.php
   handles their toggle. */
#menu .rossa-submenu { list-style: none; }
#menu .rossa-submenu__items {
  display: none;                /* collapsed by default; JS toggles it */
  list-style: none;
  margin: 0;
  padding: 0;
}
#menu .rossa-submenu.is-open > .rossa-submenu__items { display: block; }
/* Deeper indent than 1st-level items so the nesting reads. The icon belongs to
   the parent sub-menu header; children are plain indented text. The left margin
   tabs the whole link (and its hover/active background) inwards, so a child's
   highlight starts further right than its parent's. */
#menu .rossa-submenu__items li { margin-bottom: 3px; }   /* small vertical gap, like the top-level items */
#menu .rossa-submenu__items li a {
  margin-left: 0;
  padding-left: 22px;          /* sangría modesta; ya no hay punto-nodo que librar */
  color: var(--rossa-muted);   /* grandchild = secondary text (fixes legacy orange) */
}
/* Figma: los hijos y la cabecera de submenú van SOLO texto (sin icono).
   La 2ª regla NO está bajo .menugroupitems a propósito: cuando un grupo se
   aplana porque el usuario solo tiene permiso para su submenú, ese submenú
   cuelga directamente de .panel_admin y sus hijos se quedaban fuera del
   selector de arriba (y con el icono a 45px, tamaño de 1er nivel). */
#menu .menugroupitems li a i { display: none; }
#menu .rossa-submenu__items li a i { display: none; }

/* Decreasing font size by depth: category (parent) > items/sub-menu (child) >
   sub-items (grandchild). Top-level keeps lydia's base size. */
#menu .panel_admin .menugroupitems li a { font-size: 14px; }        /* child */
#menu .panel_admin .rossa-submenu__items li a { font-size: 13px; }  /* grandchild */

/* The sub-menu header carries .menugroup only to get the chevron; that class
   also forces the big 1st-level icon (22px/45px). Bring its icon back to the
   sibling item size (16px/30px) so a sub-menu looks like its no-children
   siblings, just with the chevron.
   OJO: scoped a .menugroupitems (submenú ANIDADO). Un submenú ASCENDIDO a 1er
   nivel — grupo que se aplana porque el usuario solo tiene permiso para él,
   ver menuGroup() en includes/functions.php — hereda el icono del grupo y debe
   pintarlo al tamaño de grupo (22px/45px), como cualquier otra fila del raíl. */
#menu .menugroupitems a.rossa-submenu__head .fas,
#menu .menugroupitems a.rossa-submenu__head .far {
  font-size: 16px;
  width: 30px;
  margin-right: 3px;
  text-align: left;
}
/* Expander +/- (Figma) en cabeceras de grupo (1er nivel) y de submenú (2º nivel),
   pintado como MÁSCARA Lucide (no glifo Font Awesome): "+" plegado, "-" desplegado.
   Solo los grupos multi-item son a.menugroup; Inicio/Facturas (1 item) son enlaces
   sueltos y no llevan indicador. */
#menu .panel_admin > li > a.menugroup::after,
#menu .panel_admin a.rossa-submenu__head::after {
  content: "";
  display: block;               /* lydia oculta su ::after en móvil; forzamos que se vea */
  flex: 0 0 auto;
  margin-left: auto;            /* empuja el indicador al borde derecho */
  width: 15px; height: 15px;
  font-size: 0;                 /* mata cualquier glifo FA heredado */
  background-color: var(--rossa-muted);
  -webkit-mask: url("https://cdn.rossa.app/icons/plus.svg") no-repeat center;  mask: url("https://cdn.rossa.app/icons/plus.svg") no-repeat center;
  -webkit-mask-size: contain;   mask-size: contain;
}
/* Desplegado => "-". 1er nivel: SOLO el grupo abierto (.rossa-open), no el
   currmenu que lydia acumula al clicar. 2º nivel: submenú abierto (.is-open). */
#menu .panel_admin > li.rossa-open > a.menugroup::after,
#menu .rossa-submenu.is-open > a.rossa-submenu__head::after,
#menu .panel_admin a.rossa-submenu__head.currmenu::after {
  -webkit-mask-image: url("https://cdn.rossa.app/icons/minus.svg");  mask-image: url("https://cdn.rossa.app/icons/minus.svg");
}
/* Etiqueta de las filas de 1er nivel alineada a la izquierda, junto al icono. */
#menu .panel_admin > li > a { display: flex; align-items: center; }
#menu .panel_admin > li > a .txtmenu { flex: 1; text-align: left; }
/* Color de los hijos de grupo: ink (corrige el naranja legacy de algunos módulos). */
#menu .menugroupitems > li > a { color: var(--rossa-ink); }

/* ============================================================================
   MENÚ RESPONSIVE — flyouts en cascada (PC #1 y tablet #2). En ≥701px los hijos
   de grupo y los submenús dejan de empujar (acordeón) y FLOTAN a la derecha del
   raíl como paneles. Aprovecho que lydia ya alterna el display de .menugroupitems
   al hacer clic (no toco su JS); mi CSS solo los reposiciona como panel flotante.
   El acordeón inline se conserva en móvil (≤700px, Figma #5).
   ============================================================================ */
@media (min-width: 701px) {
  #menu .panel_admin > li { position: relative; }

  /* Panel flotante de los hijos de un grupo (1er nivel). */
  #menu .menugroupitems {
    position: absolute;
    left: 100%; top: 0;
    min-width: 232px; width: max-content; max-width: 340px;
    overflow: visible;          /* visible para que el submenú anidado (Lineal/Mensual) no se recorte */
    margin: 0; padding: 8px 0;
    background: var(--rossa-white);
    border: 1px solid var(--rossa-border);
    border-radius: 0 10px 10px 0;
    box-shadow: 10px 12px 34px rgba(0, 48, 60, .16);
    z-index: 1200;
  }
  /* Un solo grupo abierto a la vez: el estado lo lleva .rossa-open (JS en menu.php),
     no el display inline que alterna lydia (lo vencemos con !important). Cerrados por
     defecto; se abren al hacer clic en su cabecera. */
  #menu .panel_admin > li > .menugroupitems        { display: none !important; }
  #menu .panel_admin > li.rossa-open > .menugroupitems { display: block !important; }
  /* Raíl colapsado (botón "Ocultar"): lydia pone opacity:0 a TODO el texto del
     menú para dejarlo icon-only; pero el texto DENTRO de los flyouts sí debe verse. */
  body.showhidemenu #menu .menugroupitems a .txtmenu,
  body.showhidemenu #menu .rossa-submenu__items a .txtmenu { opacity: 1 !important; }
  /* Dentro del panel los hijos van a la izquierda (no centrados como el raíl). */
  #menu .menugroupitems > li > a { text-align: left; padding: 9px 16px; }

  /* Submenú de 2º nivel → otro panel a la derecha del primero. */
  #menu .rossa-submenu { position: relative; }
  #menu .rossa-submenu.is-open > .rossa-submenu__items {
    position: absolute;
    left: 100%; top: 0;
    min-width: 180px; width: max-content;
    margin: 0; padding: 8px 0;
    background: var(--rossa-white);
    border: 1px solid var(--rossa-border);
    border-radius: 0 10px 10px 0;
    box-shadow: 10px 12px 34px rgba(0, 48, 60, .16);
    z-index: 1300;
  }
}

#menu .menugroupitems,
#menu .rossa-submenu__items {
  scrollbar-width: thin;                                   /* Firefox */
  scrollbar-color: var(--rossa-border) transparent;
}
#menu .menugroupitems::-webkit-scrollbar,
#menu .rossa-submenu__items::-webkit-scrollbar { width: 4px; height: 4px; }
#menu .menugroupitems::-webkit-scrollbar-track,
#menu .rossa-submenu__items::-webkit-scrollbar-track { background: transparent; }
#menu .menugroupitems::-webkit-scrollbar-thumb,
#menu .rossa-submenu__items::-webkit-scrollbar-thumb { background: var(--rossa-border); border-radius: 999px; }
#menu .menugroupitems::-webkit-scrollbar-thumb:hover,
#menu .rossa-submenu__items::-webkit-scrollbar-thumb:hover { background: var(--rossa-muted); }

/* Raíl COLAPSADO en PC (flecha de #hidemenu → body.showhidemenu, #menu a 60px).
   lydia solo pone opacity:0 al texto del raíl, así que el indicador +/- de los
   grupos seguía visible y pegado al borde derecho: un "+" suelto al lado del
   icono, sin etiqueta a la que referirse. Mismo criterio que el raíl de tablet
   (bloque siguiente): sin indicador — el grupo se abre igual como flyout, que es
   donde se lee la etiqueta. Solo se oculta el indicador: el icono lo posiciona el
   padding del <a> y así queda a la misma altura que los items sin grupo. */
@media (min-width: 1025px) {
  body.showhidemenu #menu .panel_admin > li > a.menugroup::after { display: none; }
}

/* Tablet (#2): el raíl se reduce a SOLO iconos; los flyouts muestran el texto. */
@media (min-width: 701px) and (max-width: 1024px) {
  #menu { width: 64px; }
  #menu .panel_admin > li > a .txtmenu { display: none; }          /* sin labels en el raíl */
  #menu .panel_admin > li > a.menugroup::after { display: none; }  /* sin +/- en el raíl */
  #menu .panel_admin > li > a { justify-content: center; padding-left: 0; padding-right: 0; }
  #menu .panel_admin > li > a i { margin: 0; }
  #menu #hidemenu { display: none; }   /* el raíl ya es compacto: sin "Ocultar" */
  /* El contenido y el footer se ajustan al raíl estrecho. */
  #contenido_admin { margin-left: 64px !important; width: auto !important; float: none !important; }
  #footer { width: 64px; }
}

/* Tree connectors (gestor readability): a vertical trunk + horizontal ticks
   link a group's children to the group; an expanded sub-menu draws its own
   nested trunk with node dots (filled = active item, hollow = idle). Pure CSS
   via ::before/::after on the existing <li>/<a> — no HTML/JS change. Geometry
   measured live (rows 42px high -> center 21px; icons at +13px; text at +46px). */
/* — Level 1: group children (.menugroupitems > li) — */
#menu .menugroupitems > li { position: relative; }
#menu .menugroupitems > li::before {            /* vertical trunk segment */
  content: ""; position: absolute;
  left: -7px; top: 0; bottom: 0; width: 1px;
  background: var(--rossa-border);
}
#menu .menugroupitems > li:first-child::before { top: 21px; }                 /* start at 1st tick */
#menu .menugroupitems > li:last-child::before  { bottom: calc(100% - 21px); } /* end at last tick  */
#menu .menugroupitems > li::after {             /* horizontal tick to the row */
  content: ""; position: absolute;
  left: -7px; top: 21px; width: 15px; height: 1px;
  background: var(--rossa-border);
}
/* — Level 2: sub-menu children (.rossa-submenu__items > li): nested trunk + dots — */
#menu .rossa-submenu__items { position: relative; }
#menu .rossa-submenu__items > li { position: relative; }
#menu .rossa-submenu__items > li::before {      /* nested trunk segment */
  content: ""; position: absolute;
  left: 17px; top: 0; bottom: 0; width: 1px;
  background: var(--rossa-border);
}
#menu .rossa-submenu__items > li:first-child::before { top: -10px; }                /* reach up to the parent head */
#menu .rossa-submenu__items > li:last-child::before  { bottom: calc(100% - 21px); } /* stop at last node */
#menu .rossa-submenu__items > li > a::before {  /* node dot (idle = hollow) */
  content: ""; position: absolute;
  left: 13px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  z-index: 1;
}
#menu .rossa-submenu__items > li > a.currmenu::before {  /* active node = filled teal */
  background: var(--rossa-teal);
  border-color: var(--rossa-teal);
}
#menu .rossa-submenu__items li a:hover {
  background: rgba(0, 94, 102, .10);   /* hover: subtle teal tile (affordance) */
  color: var(--rossa-teal);
  border-radius: 8px;
}
/* Active leaf (3rd level): NO background tile — the filled node dot + bold teal
   text are the active indicator (user request: remove the pill on e.g. "Mensual",
   keep the parent sub-menu's tile). Beats the group/panel currmenu tile (equal
   specificity) by loading later. */
#menu .rossa-submenu__items li a.currmenu {
  background: transparent;
  border-left: 3px solid var(--rossa-teal);   /* barra teal a la izquierda en vez del punto */
  color: var(--rossa-ink);
  font-weight: 600;
}
#menu .rossa-submenu__items li a:hover i,
#menu .rossa-submenu__items li a.currmenu i { color: var(--rossa-teal) !important; }

/* — Rediseño Figma: SIN conectores de árbol ni puntos (los hijos son texto plano) — */
#menu .menugroupitems > li::before,
#menu .menugroupitems > li::after,
#menu .rossa-submenu__items > li::before,
#menu .rossa-submenu__items > li > a::before { content: none; }

/* Collapse toggle (#hidemenu) — SOLO una flecha, sin la palabra "Ocultar".
   El <span>Ocultar</span> sigue en el HTML (admin/includes/menu.php) y solo se
   oculta por CSS: lydia.css y Lydia_Script.js siguen apuntando a `#hidemenu span`.
   La flecha es el doble chevron Lucide del CDN como MÁSCARA (igual que §32), no
   el glifo Font Awesome \f0d9 que pinta lydia.css; se gira 180° al colapsar, así
   una sola imagen sirve para los dos estados y la transición es suave. */
#menu #hidemenu,
#menu #hidemenu span { color: var(--rossa-muted); }
#menu #hidemenu {
  height: 34px;
  margin-top: -10px;
  padding: 0 8px 0 0;
}
#menu #hidemenu span { display: none; }
#menu #hidemenu::before {
  content: "";
  display: block;
  width: 26px; height: 26px;
  font-family: inherit;                 /* neutraliza el glifo FA de lydia.css */
  background-color: currentColor;
  -webkit-mask: url("https://cdn.rossa.app/icons/chevrons-left.svg") no-repeat center;   mask: url("https://cdn.rossa.app/icons/chevrons-left.svg") no-repeat center;
  -webkit-mask-size: 18px 18px;   mask-size: 18px 18px;
  transition: transform .25s ease;
}
#menu #hidemenu:hover { color: var(--rossa-teal); }
/* Colapsado: la misma flecha mirando al otro lado (= "mostrar"). */
body.showhidemenu #menu #hidemenu::before { transform: rotate(180deg); }

/* Content header */
#cabecera_texto h1 { color: var(--rossa-ink); }
.admin_tit { border-bottom: 1px solid var(--rossa-border); color: var(--rossa-ink); }

/* Top toolbar — flex bar. The account items are floated in DOM order
   (descon, nombreuser, fechahora); flex `order` puts them in the right visual
   order without touching markup, and align-items:center fixes the vertical
   alignment floats couldn't. No justify-content:flex-end -> the absolute logo
   stays at the left. */
#toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;              /* barra más alta (Figma): el logo respira y el
                                    título deja de ir pegado al borde */
  /* El contenido no se centra en la barra: en el Figma queda asentado abajo, con
     más aire por arriba que por abajo (18/8). Es lo que hace que el rótulo no se
     lea como "demasiado grande" pese a compartir cuerpo con los títulos. */
  padding: 16px 24px 12px 76px;   /* left gap reserves room for the round logo */
  background: var(--rossa-white);
  border: 0;
  border-bottom: 1px solid var(--rossa-border);
  box-sizing: border-box;
  color: var(--rossa-ink);
  font-size: 14px;
}
#toolbar div { margin: 0; }        /* cancel base "#toolbar div{margin:2px 5px}" */
#toolbar #portal,
#toolbar .demo_mode,
#toolbar #fechahora,
#toolbar #nombreuser,
#toolbar #descon { float: none; }  /* flex controls placement, not floats */
#toolbar #portal     { order: 1; margin-right: auto; }  /* far left, after logo */
#toolbar .demo_mode  { order: 2; }
#toolbar #fechahora  { order: 3; }
#toolbar #nombreuser { order: 4; display: inline-flex; align-items: center; gap: 8px; }
#toolbar #descon     { order: 5; }
#toolbar #portal a,
#toolbar #nombreuser,
#toolbar #nombreuser strong,
#toolbar #fechahora,
#toolbar #fechahora span { color: var(--rossa-ink); }

/* Content clears the fixed bar — beats footer.php's inline 30px */
#contenedor_absoluto { padding-top: 80px !important; }   /* 72 de barra + 8 de aire */
#contenedor_absoluto:has(#contenido_admin.isiframe) { padding-top: 20px !important; }

/* Logo: como en el Figma, el disco baja hasta montarse sobre la línea inferior de
   la barra y la corta en vez de quedar atravesado por ella. El halo blanco (el
   padding + fondo del contenedor) es lo que interrumpe las líneas que pasan por
   detrás — la de la barra y, con el menú desplegado, la de su columna. El PNG del
   logo es transparente, así que el disco se apoya en ese halo y no en un cuadrado.
   En móvil el logo va centrado en la barra: §21 recoloca esta misma caja. */
#toolbar #toolbarlogo {
  top: 20px;      /* la línea cruza el disco por debajo de su centro (~59% del alto):
                     ni partido por la mitad ni pegado al techo de la barra */
  left: 16px;
  z-index: 300;
  padding: 7px;
  background: var(--rossa-white);
  border-radius: 50%;
  line-height: 0;              /* sin el hueco de línea base bajo el <img> */
}
/* El PNG viene recortado al disco, mientras que el JPG anterior traía ~5% de
   margen blanco a cada lado: a igual width="51" el disco se veía más grande. Se
   fija al tamaño que tenía antes en pantalla (51 × 455/500 ≈ 46px). */
#toolbar #logo_lidia { width: 46px; height: 46px; }

/* Account buttons: outlined pills. margin:0 clears the legacy #descon
   margin-top:4.5px that was pushing Desconectar below Panel. */
#descon,
#panel_user {
  display: inline-flex;
  align-items: center;
  height: 32px;
  margin: 0;
  padding: 0 14px;
  border-radius: var(--rossa-radius);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  background: transparent;
}
#panel_user { color: var(--rossa-teal); border: 1px solid var(--rossa-teal); }
#panel_user:hover { background: var(--rossa-teal); color: var(--rossa-white); }
#descon { color: var(--rossa-red); border: 1px solid var(--rossa-red); }
#descon:hover { background: var(--rossa-red); color: var(--rossa-white); }

/* Global "Crear reserva" CTA — the one place this universal action lives now
   (the per-screen "Añadir reserva" buttons were consolidated here). Primary
   teal pill, leads the toolbar's right cluster (order:2, before fecha/account). */
#toolbar #btn-crear-reserva {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  margin: 0;
  padding: 0 16px;
  border-radius: var(--rossa-radius);
  background: var(--rossa-teal);
  border: 1px solid var(--rossa-teal);
  color: var(--rossa-white);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
#toolbar #btn-crear-reserva i { font-size: 25px; line-height: 1; transform: translateY(2px); margin-left: -4px; }
#toolbar #btn-crear-reserva:hover { background: var(--rossa-ink); border-color: var(--rossa-ink); color: var(--rossa-white); }

/* Footer: fixed to the viewport bottom, ONLY over the content area (left
   offset clears the fixed 260px sidebar — Figma keeps the menu column free).
   Figma Footer symbol: short centered hairline, "Rossa V4 (Core…) © 2025"
   (© bold), Ultus logo below. float/width/uppercase cancel legacy lydia.css. */
#footer {
  position: fixed;
  left: 0;                        /* anchored to the LEFT MENU column only */
  right: auto;
  bottom: 0;
  z-index: 990;                   /* above #menu so it shows over the sidebar */
  float: none;
  width: 260px;                   /* = #menu width — footer lives over the sidebar */
  box-sizing: border-box;
  margin: 0;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: var(--rossa-white);
  border-top: 0;
  color: var(--rossa-deep);
  font-family: var(--rossa-font);
  font-size: 14px !important;     /* beats lydia's 14px !important */
  font-weight: 400;
  text-transform: none;
  text-shadow: none;
  text-align: center;
  transition: left .7s ease;     /* eases in lockstep with the #menu collapse */
}
/* Short centered hairline (Figma: 810px line inside a 941px footer) */
#footer::before {
  content: "";
  display: block;
  width: min(820px, 86%);
  height: 1px;
  background: rgba(32, 92, 104, .45);
  margin-bottom: 4px;
}
#footer #footer-text { color: var(--rossa-deep); }
#footer #footer-text strong { font-weight: 700; }
#footer #poralt,
#footer a { color: var(--rossa-deep); font-weight: 400; text-decoration: none; }
#footer a:hover { color: var(--rossa-petrol); }
#footer #footer-logo img { display: block; height: 26px; width: auto; }
/* In-app footer (post-login): show ONLY the Ultus logo. The login screen
   already carries the version + copyright credit, so drop the hairline and
   the "Rossa v5 … © …" text here. Login keeps both (scoped by body.lologin). */
body:not(.lologin) #footer::before { display: none; }
body:not(.lologin) #footer #footer-text { display: none; }
/* Collapsed sidebar (icon rail): hide the footer — no room for the credit. */
body.showhidemenu #footer { display: none; }
@media (max-width: 700px) {
  /* Mobile: the sidebar is an off-canvas overlay, so the footer spans the
     full width at the bottom (it has no persistent column to sit in). */
  #footer { left: 0; width: 100%; display: flex; }
}
/* Footer now lives over the sidebar, not the content — only a small gap needed.
   El login queda fuera */
body:not(.lologin):has(#footer) { padding-bottom: 24px; }

/*=============================================================================
  11. SCREEN: Gestión de reservas  (match target: airy white, underline tabs)
  ---------------------------------------------------------------------------
  Overrides gestion_reservas.css (loaded earlier) toward the light/airy target:
  white table rows with thin separators (was gray cards w/ 5px white borders),
  and text+underline tabs (was dark-navy/red pills).
=============================================================================*/

/* Grey content panel (#ECF0F1) behind the filters/table -> white */
.rossa-ctr-admin { background-color: var(--rossa-white); }

/* Table: gray "floating cards" -> airy white rows with thin separators */
.rossa-table--bkg tr { background-color: var(--rossa-white); }
.rossa-table--bkg th,
.rossa-table--bkg td {
  border: 0;
  border-bottom: 1px solid var(--rossa-border);
  padding: 14px 8px;
}
.rossa-table--bkg th {
  color: var(--rossa-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .03em;
}
/* Un bloque legacy `.rossa-table.rossa-table--bkg` (lydia.css) pinta las etiquetas
   con barra teal #006169 (+ box-shadow) y gana por especificidad; devolvemos las
   etiquetas al flat del rediseño (gris-muted, sin barra ni sombra). Mismo/mayor
   nivel que el legacy; rossa.css carga después. */
.rossa-table.rossa-table--bkg {
  box-shadow: none;
  border-radius: var(--rossa-radius);
  margin: 0;
}
.rossa-table.rossa-table--bkg th,
.rossa-table.rossa-table--bkg th[colspan="2"] {
  background-color: transparent;
  color: var(--rossa-muted);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 14px 8px;
}
.rossa-table.rossa-table--bkg td:first-child { color: var(--rossa-ink); }
/* Icono eliminar (papelera) en tarjeta: naranja legacy -> destructivo salmón + coral. */
.rossa-trash {
  background-color: var(--rossa-salmon);
  color: var(--rossa-coral);
}
/* Botón "Eliminar" de la tarjeta (.rossa-btn.rossa-btn--red): .rossa-btn le mete
   fondo verde y ver_reserva.css lo pinta naranja-outline; lo unificamos al
   destructivo del rediseño (salmón + coral). 0,2,0 vence a ambos (0,1,0). */
.rossa-btn.rossa-btn--red {
  background-color: var(--rossa-salmon);
  color: var(--rossa-coral);
  border: 1px solid #f6d6cd;
}
.rossa-btn.rossa-btn--red:hover,
.rossa-btn.rossa-btn--red:active {
  background-color: #fbe0d8;
  color: var(--rossa-coral);
  border-color: var(--rossa-coral);
}
/* cerraduras_config: la fila-cabecera de sección (.dcc-sec, banda teal + texto blanco
   por estilo inline) queda tapada por el zebra de §18 en las filas pares -> blanco
   sobre gris claro (ilegible). Reafirmamos la banda teal (id vence al zebra 0,3,4). */
#contenido_admin table.dcc-table tr.dcc-sec td {
  background-color: var(--rossa-teal);
  color: var(--rossa-white);
}
/* Timeline (ver_reserva): el icono decorativo de sección usaba comunicaciones.png
   (icono de comunicaciones, ajeno al timeline). Lo cambiamos al receipt-text de
   Lucide (máscara teal) para que represente el registro/histórico. */
.rossa-ctr__icon--timeline {
  background-image: none;
  background-color: var(--rossa-teal);
  -webkit-mask: url("https://cdn.rossa.app/icons/receipt-text.svg") no-repeat center / contain;
          mask: url("https://cdn.rossa.app/icons/receipt-text.svg") no-repeat center / contain;
  width: 44px;
  height: 44px;
  top: -22px;
}

/* Filter tabs (Actuales/Futuras/…): dark pills -> text + teal underline.
   This is the reference look for the PMS-wide unified tabs (see §14). */
.rossa-slider__tab-box .rossa-slider__tab {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--rossa-muted);
  padding: 8px 6px;
  font-family: var(--rossa-font);
  font-weight: 600;
}
.rossa-slider__tab-box .rossa-slider__tab:hover {
  background: transparent;
  border: 0;
  color: var(--rossa-ink);
}
.rossa-slider__tab-box .rossa-slider__tab.active {
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--rossa-teal);
  color: var(--rossa-teal);
}

/*=============================================================================
  12. GENERIC ADMIN CONTENT  (broad theme for config/form panels)
  ---------------------------------------------------------------------------
  Scoped to #contenido_admin so it never touches the sidebar/toolbar or guest
  pages. Cosmetic only (border/radius/background/focus) — no width/padding/
  display changes, so existing layouts and widgets keep working.
=============================================================================*/
#contenido_admin input[type="text"],
#contenido_admin input[type="email"],
#contenido_admin input[type="password"],
#contenido_admin input[type="number"],
#contenido_admin input[type="search"],
#contenido_admin input[type="tel"],
#contenido_admin input[type="date"],
#contenido_admin input[type="datepicker"],
#contenido_admin input.hasDatepicker,
#contenido_admin textarea,
#contenido_admin select {
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background-color: var(--rossa-white);
  color: var(--rossa-ink);
  font-family: var(--rossa-font);
}
/* jQuery-UI date fields (type="datepicker" / .hasDatepicker): clickable affordance */
#contenido_admin input[type="datepicker"],
#contenido_admin input.hasDatepicker { cursor: pointer; }
#contenido_admin input:focus,
#contenido_admin textarea:focus,
#contenido_admin select:focus {
  outline: none;
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .15);
}

/*=============================================================================
  13. SCREEN: Ver reserva (booking detail) — match Figma target
  ---------------------------------------------------------------------------
  The .rossa-ctr system already implements most of the target. Deltas:
  secondary buttons -> white outline; cards -> softer radius + subtle border.
  (Structural bits — desktop tabs, header strips — pending a look at the live
  screen, since they may need markup/JS, not just CSS.)
=============================================================================*/

/* Secondary buttons: gray -> white outline */
.rossa-btn--default {
  background-color: var(--rossa-white);
  color: var(--rossa-ink);
  border: 1px solid var(--rossa-border);
}
.rossa-btn--default:hover {
  background-color: var(--rossa-surface);
  border-color: #c7cfcf;
}
.rossa-btn--negative { border-color: var(--rossa-border); color: var(--rossa-ink); }

/* Cards: flat — no border, no shadow, modest radius */
.rossa-ctr-block {
  border-radius: 10px;
  border: 0;
  box-shadow: none;
}

/*=============================================================================
  14. SCREEN: Inicio dashboard (pagina_inicio) — match Figma target
  ---------------------------------------------------------------------------
  Keeps the existing .rossa-card system; only fixes the deltas vs the target:
  column headers & tabs from solid bars -> text + teal underline; tighter card
  radius; remove the leftover grey sticky background.
=============================================================================*/

/* Leftover grey -> white; drop the boxed outer border */
.rossa-box-dropdown        { background: var(--rossa-white); }
.rossa-init-secciones-tabs { border: 0; }

/* Column headings ENTRADAS / SALIDAS / ACTUALES — Figma: green (#00a886)
   Work Sans Medium text over a thin green rule (chevron icon inherits color) */
.rossa-dropdown,
.rossa-dropdown--entrada,
.rossa-dropdown--salida,
.rossa-dropdown--actual {
  background: transparent;
  color: var(--rossa-green-fig);
  border-radius: 0;
  border-bottom: 1px solid var(--rossa-green-fig);
  padding: 8px 4px;
  font-family: var(--rossa-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
}
/* aire entre la cabecera desplegable y sus tarjetas: pegaban a 0px */
#contenido_admin .rossa-box-dropdown { margin-bottom: 40px; }

/* Tipografía oficial en toda la tarjeta: varias zonas (estado de pago,
   "huéspedes completos", pie) heredaban la Verdana del body de lydia. */
#contenido_admin .rossa-card { font-family: var(--rossa-font); }

/* Badge de estado de pago (PAG/NP…): el disco se queda en sus 40px de
   escritorio; solo cambian la fuente y el cuerpo de la letra, que a 16px
   quedaba a ras de borde. */
.rossa-card-status .rossa-card-tag {
  font-family: var(--rossa-font);
  font-size: 13px;
  letter-spacing: .02em;
}
@media screen and (max-width: 480px) {
  .rossa-card-status .rossa-card-tag {
    width: 40px;
    height: 40px;
    font-size: 13px;
  }
}

/* ---- UNIFIED TABS: text + teal underline ----------------------------------
   Single tab style across the whole PMS, matching the Reservas screen
   (.rossa-slider__tab, §11): transparent background, muted text, active =
   teal text + 2px teal underline. Covers the two remaining tab systems:
     .rossa-tabs / .rossa-tabs-current   Inicio (Anterior/Actual/Posterior)
     .pest / .pest.current               config, idiomas, códigos, llaves_api,
                                         gsm_api, db_maintenance, module_config…
   The !important flags beat lydia.css's ".current { … !important }" rules. */
.rossa-tabs,
.pest {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 8px 10px;
  margin-right: 6px;
  color: var(--rossa-muted);
  font-family: var(--rossa-font);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.rossa-tabs a,
.pest a { color: inherit; text-decoration: none; }
.rossa-tabs:hover,
.rossa-tabs-focus,
.pest:hover {
  background: transparent;
  color: var(--rossa-ink);
}
.rossa-tabs-current,
.rossa-tabs-current:hover,
.pest.current,
.pest.current:hover {
  background: transparent;
  border-bottom: 2px solid var(--rossa-teal) !important;
  color: var(--rossa-teal) !important;
  cursor: default;
}
.rossa-tabs-current a,
.pest.current a,
.pest.current:hover a { color: var(--rossa-teal) !important; }

/* Tab-section headings "FECHA ACTUAL: ..." — Figma: Work Sans Regular ~19px */
.rossa-init-secciones-tabs h2,
#filter-container .cont h2 {
  font-family: var(--rossa-font);
  font-size: 19px;
  font-weight: 400;
  color: var(--rossa-deep);
}

/* Reservation cards: fully styled in §20 (this section used to set 10px
   radius here — removed so it can't fight the §20 Figma spec) */

/*=============================================================================
  15. SCREEN: Inicio — header + filter bar (.rossa-container-filters)
  ---------------------------------------------------------------------------
  Figma "Inicio" frame (78:223), exact spec decoded from canvas.fig:
    H1            Work Sans SemiBold 23px  #00303c
    Intro         Work Sans Medium  16px  #205c68
    Inputs        39px tall, hairline #205c68 border, square corners,
                  Work Sans Medium, petrol text, 10/15 padding
    Filtrar       filled petrol (#205c68) button, radius 5, hover #03424e
    Añadir        filled brand-red (#e7004c) button, radius 5, white SemiBold
  Everything is scoped under .rossa-container-filters (plus the two heading
  rules) so other screens that reuse .rossa-btn/.rossa-input are untouched.
=============================================================================*/
#contenido_admin h1 {
  font-family: var(--rossa-font);
  font-size: 23px;
  font-weight: 600;
  color: var(--rossa-navy);
}
#contenido_admin .rossa-intro {
  font-family: var(--rossa-font);
  font-size: 16px;
  font-weight: 500;
  color: var(--rossa-petrol);
  max-width: 860px;
}

/* Filter bar: one airy row, Figma gap rhythm */
.rossa-container-filters { gap: 16px 18px; margin: 18px 0 24px; }
.rossa-container-filters .rossa-init-filters { gap: 10px; }

/* Inputs: square hairline boxes (Figma draws 0.5px #205c68 strokes) */
.rossa-container-filters .rossa-input {
  height: 39px;
  box-sizing: border-box;
  border: 1px solid rgba(32, 92, 104, .55);
  border-radius: 0;
  background-color: var(--rossa-white);
  padding: 8px 15px;
  font-family: var(--rossa-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--rossa-petrol);
  cursor: auto;
  -webkit-appearance: none;
  appearance: none;
}
.rossa-container-filters .rossa-input:focus {
  outline: none;
  border-color: var(--rossa-petrol);
  box-shadow: 0 0 0 3px rgba(32, 92, 104, .12);
}
.rossa-container-filters input[type="date"].rossa-input { cursor: pointer; }

/* Labels ("Búsqueda:", checkbox captions) */
.rossa-container-filters .rossa-text {
  font-family: var(--rossa-font);
  font-size: 16px;
  font-weight: 500;
  color: var(--rossa-petrol);
}

/* Checkboxes: real checkboxes, petrol accent */
.rossa-container-filters .rossa-container-checkbox { align-items: center; gap: 6px; }
.rossa-container-filters .rossa-checkbox {
  -webkit-appearance: auto;
  appearance: auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--rossa-petrol);
  cursor: pointer;
}

/* "Filtrar reservas" (submit): filled petrol, radius 5 */
.rossa-container-filters input.rossa-btn {
  height: 39px;
  margin: 0;
  padding: 10px 15px;
  border: 0;
  border-radius: 5px;
  background-color: var(--rossa-petrol);
  color: var(--rossa-white);
  font-family: var(--rossa-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1 !important;     /* beats legacy 18px !important */
  -webkit-appearance: none;
  appearance: none;
}
.rossa-container-filters input.rossa-btn:hover,
.rossa-container-filters input.rossa-btn:active { background-color: var(--rossa-petrol-dark); }

/* "Añadir reserva" (anchor): filled brand red, radius 5 */
.rossa-container-filters a.rossa-btn {
  height: 39px;
  margin: 0;
  padding: 10px 15px;
  border: 0;
  border-radius: 5px;
  background-color: var(--rossa-red);
  color: var(--rossa-white);
  font-family: var(--rossa-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 19px !important;  /* beats legacy 18px !important */
}
.rossa-container-filters a.rossa-btn:hover,
.rossa-container-filters a.rossa-btn:active { background-color: var(--rossa-red-dark); }

/* --- Fianzas ocultas en Inicio (petición del usuario) ---------------------
   Se esconden el filtro "Mostrar fianzas pendientes" y el bloque "Reservas
   pendientes de devolver fianza". Solo CSS: el HTML de admin/index.php y el JS
   (inicio_functions.js / apiCall.js siguen alternando .rossa-box-none sobre
   #rossa-box-bail, nunca estilo inline) quedan intactos, así que borrar estas
   reglas devuelve la funcionalidad tal cual. */
.rossa-container-filters .rossa-container-checkbox:has(#rossa-checkbox-bail) { display: none; }
/* Fallback sin :has(): el wrapper sigue en el flujo pero ya no muestra nada */
.rossa-container-filters label[for="rossa-checkbox-bail"],
.rossa-container-filters #rossa-checkbox-bail { display: none; }
#contenido_admin #rossa-box-bail { display: none; }

/*=============================================================================
  16. SCROLL BUTTONS (#topbottom)
  ---------------------------------------------------------------------------
  Redesigned: the old corner PNG arrows are now two circular SVG buttons that
  sit ON the fixed footer bar (right side, vertically centered within it).
  Overrides legacy lydia.css #topbottom.
=============================================================================*/
#topbottom {
  position: fixed;
  right: 16px;
  bottom: 24px;                /* centers a 32px button in the ~80px footer */
  top: auto;
  transform: none;
  z-index: 985;                /* just above #footer (980) */
  width: auto;
  display: flex;
  flex-direction: row;
  gap: 8px;
  opacity: 1;
}
#btntop,
#btnbottom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--rossa-white);
  color: var(--rossa-petrol);
  border: 1px solid rgba(32, 92, 104, .35);
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
#btntop:hover,
#btnbottom:hover {
  background: var(--rossa-petrol);
  color: var(--rossa-white);
}

/*=============================================================================
  17. FEEDBACK MESSAGES  (.mensaje_ok / .mensaje_error / .mensaje_warning)
  ---------------------------------------------------------------------------
  Figma "Mensaje de error" component (80:758): flat tinted box (#eff2f3),
  Work Sans Bold 16, status-colored text, 10px padding — no left accent bar,
  no drop shadow. Color per type: error #e7004c, ok #00a886, warning #eb5d37.
  Layout properties (display:flex, gaps) from lydia.css are kept; only the
  skin is overridden. Wins over lydia's white+left-border AND the Bootstrap
  variants (#f8d7da/#d4edda/#fff3cd) by load order.
=============================================================================*/
.mensaje_ok,
.mensaje_error,
.mensaje_warning {
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  padding: 12px 16px;
  margin: 10px 0;
  font-family: var(--rossa-font);
  font-size: 14px;
  font-weight: 700;
  text-shadow: none;
  gap: 12px;          /* even spacing between text and action buttons (flex) */
  flex-wrap: wrap;
}
/* Status-tinted boxes (Figma language), not grey strips */
.mensaje_error   { background: var(--rossa-salmon); color: var(--rossa-red); }
.mensaje_ok      { background: #ebf7f3;             color: var(--rossa-green-fig); }
.mensaje_warning { background: #fdf3ec;             color: var(--rossa-coral); }
/* Legacy markup puts <br/><br/> inside the flex bar -> empty flex items: hide */
.mensaje_ok br, .mensaje_error br, .mensaje_warning br { display: none; }
/* Legacy .admin_boton has margin-left:auto — inside these flex bars it shoves
   every button apart. Neutralize; the container gap handles spacing. */
.mensaje_ok .admin_boton,
.mensaje_error .admin_boton,
.mensaje_warning .admin_boton { margin: 0; }
/* Plain text links inside messages — button-like anchors are excluded so a
   green/teal-filled button never gets green text painted over it */
.mensaje_error a:not(.admin_boton):not(.rossa-btn):not(.rossa-btn-negative),
.mensaje_error a:not(.admin_boton):not(.rossa-btn):not(.rossa-btn-negative):visited     { color: var(--rossa-red);       text-decoration: underline; }
.mensaje_ok a:not(.admin_boton):not(.rossa-btn):not(.rossa-btn-negative),
.mensaje_ok a:not(.admin_boton):not(.rossa-btn):not(.rossa-btn-negative):visited        { color: var(--rossa-green-fig); text-decoration: underline; }
.mensaje_warning a:not(.admin_boton):not(.rossa-btn):not(.rossa-btn-negative),
.mensaje_warning a:not(.admin_boton):not(.rossa-btn):not(.rossa-btn-negative):visited   { color: var(--rossa-coral);     text-decoration: underline; }
/* Filled buttons inside messages keep readable white text */
.mensaje_ok a.admin_boton, .mensaje_ok a.rossa-btn,
.mensaje_error a.admin_boton, .mensaje_error a.rossa-btn,
.mensaje_warning a.admin_boton, .mensaje_warning a.rossa-btn {
  color: var(--rossa-white);
  text-decoration: none;
}

/*=============================================================================
  18. LEGACY TABLES — cosmetic Figma alignment (table.estandar & friends)
  ---------------------------------------------------------------------------
  Figma "Ver Reservas" (78:348): WHITE header band with navy SemiBold 14px
  UPPERCASE labels between two petrol hairlines; body rows Work Sans 14 navy
  separated by soft hairlines (no cell grid). COSMETIC ONLY — padding kept
  close to legacy so colspan/nested-control layouts don't shift. Stateful row
  classes (tr.warni/.fallida/.abort/.enviada/.pendiente/.abortada) keep their
  semantic backgrounds: we only touch base cells and .cab headers.
=============================================================================*/
table.estandar {
  background: var(--rossa-white);
  border-radius: 5px;
}
@media (max-width: 600px) {
  #contenido_admin table.estandar { width: 100%; }
  #contenido_admin table.estandar[width="33%"] { display: table; width: 100%; }
}
table.estandar tr td {
  border: 0;
  border-bottom: 1px solid var(--rossa-hairline-soft);
  padding: 8px 8px;
  font-family: var(--rossa-font);
  font-size: 14px;
  color: var(--rossa-ink);   /* body text token — navy didn't match the white bg */
}
/* Header band: navy-on-white between hairlines (was white-on-navy) */
tr.cab td,
tr.cab th,
table.estandar tr.cab td,
.results-table tr.cab td,
.system-info-table tr.cab td {
  background: var(--rossa-white);
  color: var(--rossa-navy);
  font-family: var(--rossa-font);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .03em;
  border: 0;
  /* !important required: lydia.css tr.cab sets border:0 !important */
  border-top: 1px solid var(--rossa-hairline) !important;
  border-bottom: 1px solid var(--rossa-hairline) !important;
  border-radius: 0;
}
/* estandar_v4 (timeline view): gray cells -> white + hairline */
table.estandar_v4 tr:not(.cab) td {
  background: var(--rossa-white);
  border-bottom: 1px solid var(--rossa-hairline-soft);
  border-radius: 0;
}
/* Etiquetas de fila del detalle de timeline (Tipo/Nivel/Destino…) */
table.view_tl tr td.cabtl { color: var(--rossa-ink); }
/* Zebra (Figma): white row / soft greyish row — EVERY table style.
   Guards: .cab header bands excluded; estandar_v4 keeps its stateful row
   colors (tr_usos_boards / tr_reservas_lineas) out of the stripe. */
.rossa-table--bkg tbody tr:nth-child(even) td,
table.estandar tbody tr:not(.cab):nth-child(even) td,
table.estandar_v4 tbody tr:not(.cab):not(.tr_usos_boards):not(.tr_usos_boards_mov):not(.tr_reservas_lineas):nth-child(even) td,
table.rossa_table_estandar tbody tr:not(.cab):nth-child(even) td,
table.t_notificaciones tbody tr:not(.cab):nth-child(even) td,
.rossa-table tbody tr:nth-child(even) td,
.supplements-table tbody tr:nth-child(even) td,
.system-info-table tbody tr:not(.cab):nth-child(even) td,
.results-table tbody tr:not(.cab):nth-child(even) td {
  background-color: var(--rossa-zebra);
}

/* Form controls inside classic form tables: uniform width & height, and
   form action buttons centered (Figma) */
table.estandar tr td input[type="text"],
table.estandar tr td input[type="email"],
table.estandar tr td input[type="password"],
table.estandar tr td input[type="number"],
table.estandar tr td input[type="tel"],
table.estandar tr td input[type="search"],
table.estandar tr td input[type="datepicker"],
table.estandar tr td select {
  width: 100%;
  max-width: 320px;
  height: 38px;
  padding: 6px 12px;
  box-sizing: border-box;
}
table.estandar tr td textarea {
  width: 100%;
  max-width: 320px;
  min-height: 80px;
  padding: 6px 12px;
  box-sizing: border-box;
}
table.estandar td input[type="submit"].admin_boton,
table.estandar td button.admin_boton,
#contenido_admin form > input[type="submit"].admin_boton,
#contenido_admin form > .admin_boton {
  display: block;
  margin: 14px auto;
}

#contenido_admin #send-new-sms textarea.full-textarea {
  max-width: none;
  width: 100%;
  height: 160px;
  min-height: 120px;
}
/* Botones centrados como grupo. La celda invierte el orden visual (direction:rtl)
   para que salga Volver → Enviar pese a que en el HTML Enviar va antes. */
#contenido_admin #send-new-sms td:has(#new) { text-align: center; direction: rtl; }
#contenido_admin #send-new-sms a.admin_boton,
#contenido_admin #send-new-sms #new {
  float: none; display: inline-block; direction: ltr; vertical-align: middle; margin: 0 6px;
}

#contenido_admin #rtl_filters input[type="date"],
#contenido_admin #rtl_filters input[type="number"],
#contenido_admin #rtl_filters .admin_boton {
  height: 34px;
  box-sizing: border-box;
  vertical-align: bottom;
}
#contenido_admin #rtl_filters input[type="date"],
#contenido_admin #rtl_filters input[type="number"] {
  padding-top: 0;
  padding-bottom: 0;
}
#contenido_admin #rtl_filters .admin_boton {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 32px;
  margin-left: 0;
  margin-right: 0;
}
#contenido_admin #rtl_filters a.admin_boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
}
#contenido_admin #rtl_filters a.admin_ko { background-color: var(--rossa-red); border-color: var(--rossa-red); }
#contenido_admin #rtl_filters a.admin_ko:hover { background-color: var(--rossa-red-dark); border-color: var(--rossa-red-dark); }
/* Una sola fila de controles: Niveles y Tipos en su propia línea, y Desde/Hasta/Límite/
   Reserva JUNTO a Filtrar/reload en la misma línea. En <=1350px timelineFunctions.php
   pone .contrtlfilter en columna (apilaba inputs arriba y botones abajo); lo forzamos a
   fila. En la botonera se oculta el hueco de título vacío y se agrupan los botones. */
#contenido_admin #rtl_filters .contrtlfilter { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
#contenido_admin #rtl_filters .contrtlfilter > .rtlfilter:not(:last-child) { flex-basis: 100%; }
#contenido_admin #rtl_filters .contrtlfilter > .rtlfilter:last-child .rtlfiltertit { display: none; }
#contenido_admin #rtl_filters .contrtlfilter > .rtlfilter:last-child .rtlfiltercont {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}

/* gestor_estancias_lotes (Acciones en lote): el nombre del alojamiento (primer <p> de
   la tarjeta) se recorta con puntos suspensivos y reserva hueco a la derecha para no
   tapar el círculo de selección de la esquina superior derecha. */
#contenido_admin .cuadro_estancia_lotes > p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 30px;
  box-sizing: border-box;
  max-width: 100%;
}
/* Icono del botón de valor global: solo lo lleva ya "Rellenar seleccionados"
   (el check). "Rellenar todos" pasó a texto — no había icono de cubo de pintura
   en el CDN y con rótulo se entiende sin tooltip. */
#contenido_admin .boton_fill_lotes i { font-size: 19px; }

/* gestor_huespedes: botón de check-in radix (.rdx_btn). El icono es una imagen de
   fondo que lydia coloca al 90%, y en el botón estrecho "Checkin" se solapaba con el
   texto. Lo fijamos a la derecha y reservamos hueco para que no tape ni texto ni botón. */
#contenido_admin a.rdx_btn {
  background-position: right 8px center;
  background-size: 15px;
  padding-right: 30px;
}

/*=============================================================================
  19. JQUERY UI (smoothness 1.9.1) — dialogs, datepicker, autocomplete reskin
  ---------------------------------------------------------------------------
  The gray gradient theme (#cccccc headers, #e6e6e6 buttons) restyled to the
  Rossa language: white surfaces, hairline borders, petrol active states.
  Selectors mirror the theme's own compounds so they win by load order.
=============================================================================*/
.ui-widget { font-family: var(--rossa-font); }
.ui-widget-content {
  background: var(--rossa-white);
  border-color: var(--rossa-border);
  color: var(--rossa-ink);
}
.ui-widget-header {
  background: var(--rossa-white);          /* shorthand kills the gradient image */
  border-color: var(--rossa-border);
  color: var(--rossa-navy);
  font-family: var(--rossa-font);
  font-weight: 600;
}
.ui-dialog {
  border: 1px solid var(--rossa-border);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 48, 60, .25);
  padding: 0;
}
.ui-dialog .ui-dialog-titlebar {
  background: var(--rossa-white);
  border: 0;
  border-bottom: 1px solid var(--rossa-border);
  border-radius: 10px 10px 0 0;
  padding: 12px 16px;
  color: var(--rossa-navy);
}
.ui-dialog .ui-dialog-content { padding: 14px 16px; }
.ui-dialog .ui-dialog-buttonpane {
  border-top: 1px solid var(--rossa-border);
  margin: 0;
  padding: 10px 16px;
}
.ui-dialog .ui-dialog-buttonpane button {
  background: var(--rossa-petrol);
  border: 1px solid var(--rossa-petrol);
  border-radius: 5px;
  color: var(--rossa-white);
  font-family: var(--rossa-font);
  font-weight: 600;
  font-size: 13px;
  padding: 7px 14px;
}
.ui-dialog .ui-dialog-buttonpane button:hover {
  background: var(--rossa-petrol-dark);
  border-color: var(--rossa-petrol-dark);
}
/* Buttons / clickable cells (datepicker days, selectmenu items, ui-buttons) */
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  color: var(--rossa-ink);
  font-weight: 400;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  background: var(--rossa-strip);
  border: 1px solid var(--rossa-hairline);
  color: var(--rossa-navy);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  background: var(--rossa-petrol);
  border: 1px solid var(--rossa-petrol);
  color: var(--rossa-white);
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {                /* datepicker "today" */
  background: var(--rossa-strip);
  border: 1px solid var(--rossa-green-fig);
  color: var(--rossa-navy);
}
.ui-datepicker .ui-datepicker-header {
  background: var(--rossa-white);
  border: 0;
  border-bottom: 1px solid var(--rossa-hairline-soft);
  border-radius: 0;
}
.ui-datepicker .ui-datepicker-title { color: var(--rossa-navy); }

/*=============================================================================
  20. INICIO BOOKING CARDS — Figma card spec (frame 78:223, cards 240:*)
  ---------------------------------------------------------------------------
  Figma: white card, 1px #e6e6e6 border, radius 5, shadow 0 1px 2px
  rgba(0,0,0,.25); 40px header strip (#eff2f3 neutral; status classes keep
  their semantic tints); client name cyan #00a8d2; petrol accents inside.
  Status color classes (.rossa-card-tag-*) and responsive column widths are
  preserved — geometry/skin only.
=============================================================================*/
.rossa-card.rossa-filter-card {
  border-radius: 5px;
  border: 1px solid #e6e6e6;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  padding: 0;            /* kills §7 .rossa-card padding — header strip and
                            footer sit flush with the card edges (no box-in-box) */
  overflow: hidden;      /* strip/footer corners clip to the 5px radius */
}
.rossa-card.rossa-filter-card .rossa-card-header {
  border-radius: 5px 5px 0 0;
  overflow: hidden;                  /* clips status-tinted children to radius */
  background: var(--rossa-strip);
  min-height: 40px;
  align-items: center;
  font-family: var(--rossa-font);
}
/* Empty-state placeholder ("No hay ninguna reserva") keeps its navy bar */
.rossa-card.rossa-filter-card .rossa-card-header.rossa-card-header-no-data {
  background: var(--rossa-navy);
}
.rossa-card.rossa-filter-card .rossa-card-body { border-color: #e6e6e6; }
.rossa-card.rossa-filter-card .rossa-card-client {
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  font-family: var(--rossa-font);
}
.rossa-card.rossa-filter-card .rossa-card-client a { color: var(--rossa-cyan-fig); }
.rossa-card.rossa-filter-card .rossa-card-footer {
  border-top: 1px solid #e6e6e6;
  border-radius: 0 0 5px 5px;
}
.rossa-card.rossa-filter-card .rossa-card-estancias,
.rossa-card.rossa-filter-card .rossa-card-services { color: var(--rossa-petrol); }
.rossa-card.rossa-filter-card .rossa-card-huesped { color: var(--rossa-petrol); }

/* Tarjetas del dashboard de inicio */
.rossa-init-container-bookings .rossa-card.rossa-filter-card .rossa-card-header,
.rossa-reubicaciones-pendientes .rossa-card.rossa-filter-card .rossa-card-header { align-items: stretch; }
.rossa-init-container-bookings .rossa-card.rossa-filter-card .rossa-card-header > .rossa-card-id,
.rossa-init-container-bookings .rossa-card.rossa-filter-card .rossa-card-header > .rossa-card-dates,
.rossa-reubicaciones-pendientes .rossa-card.rossa-filter-card .rossa-card-header > .rossa-card-id,
.rossa-reubicaciones-pendientes .rossa-card.rossa-filter-card .rossa-card-header > .rossa-card-dates {
  display: flex;
  align-items: center;
}
.rossa-init-container-bookings .rossa-card.rossa-filter-card .rossa-card-header > .rossa-card-id,
.rossa-reubicaciones-pendientes .rossa-card.rossa-filter-card .rossa-card-header > .rossa-card-id {
  justify-content: center;
  margin-right: 0;
}
/* las fechas centradas en su hueco, que no queden pegadas a "Noches"; el ID
   pasa de 22% fijo a ancho de contenido para darles holgura real */
.rossa-reubicaciones-pendientes .rossa-card.rossa-filter-card .rossa-card-header > .rossa-card-id {
  width: auto;
  flex: 0 0 auto;
  padding-left: 12px;
  padding-right: 12px;
}
.rossa-reubicaciones-pendientes .rossa-card.rossa-filter-card .rossa-card-header > .rossa-card-dates {
  justify-content: center;
}

/* --- "Noches N" en la cabecera, junto a las fechas -------------------------
   Tercer bloque de .rossa-card-header (lo pinta api/lib/bookingFunctions.php
   junto a .rossa-card-dates, con la misma clase de estado .rossa-card-tag-*).
   El reparto rígido 35%/65% de admin/css/pagina_inicio.css:454-465 ya no
   cuadra con tres columnas: aquí se rebalancea a flex sin tocar el legacy. */
/* Con tres columnas el 16px del legacy (pagina_inicio.css:448) ya no deja pasar
   "dd-mm-yy | dd-mm-yy" en una línea: 14px da holgura a cualquier ancho de tarjeta. */
.rossa-card.rossa-filter-card .rossa-card-header { font-size: 14px; }
.rossa-card.rossa-filter-card .rossa-card-header > .rossa-card-id {
  width: 22%;
  flex: 0 0 22%;
}
.rossa-card.rossa-filter-card .rossa-card-header > .rossa-card-dates {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 10px;
  padding-right: 4px;
}
/* El rango de fechas no debe partirse en dos líneas al ceder sitio a "Noches N" */
.rossa-card.rossa-filter-card .rossa-card-header > .rossa-card-dates > span { white-space: nowrap; }
.rossa-card.rossa-filter-card .rossa-card-header > .rossa-card-nights {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex: 0 0 auto;
  padding: 4px 10px 4px 4px;
  white-space: nowrap;
  font-weight: 600;
}
/* En tarjetas muy estrechas el icono sobra: el texto "Noches N" ya se explica */
@media screen and (max-width: 420px) {
  .rossa-card.rossa-filter-card .rossa-card-header > .rossa-card-nights i { display: none; }
  .rossa-card.rossa-filter-card .rossa-card-header > .rossa-card-nights { padding-left: 2px; padding-right: 6px; }
}

/* --- Observaciones de la reserva ------------------------------------------*/
#contenido_admin .rossa-card.rossa-filter-card > .rossa-card-observation {
  top: 10px;                  /* (40px de cabecera - 20px de icono) / 2 */
  right: 10px;
  height: 20px;
  width: 20px;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  font-size: 0;               /* oculta la "i" de texto: el glifo lo pone la máscara */
}
#contenido_admin .rossa-card.rossa-filter-card > .rossa-card-observation::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--rossa-white);
  -webkit-mask-image: url("https://cdn.rossa.app/icons/info.svg");  mask-image: url("https://cdn.rossa.app/icons/info.svg");
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}
/* solo cuando hay observación: "Noches" se separa del icono */
#contenido_admin .rossa-card.rossa-filter-card:has(> .rossa-card-observation) .rossa-card-header > .rossa-card-nights {
  padding-right: 36px;
}
/* Iconos de contacto (SMS/WhatsApp). Heredaban el relleno verde #00a886 de
   .rossa-btn con el icono en blanco: a 12px el trazo blanco sobre verde saturado
   no se leía, y los dos chips juntos parecían dos manchas iguales. Pasan al gris
   de la cabecera de la tarjeta (--rossa-strip) con el icono en teal, que es el
   contraste que ya usa el resto de la tarjeta. El color va también en la `i`
   porque el icono se pinta con `background-color: currentColor` en su ::before.
   Aplica también a las tarjetas del bloque REUBICACIONES, que viven en su
   propio contenedor (.rossa-reubicaciones-pendientes). */
.rossa-init-container-bookings .rossa-card.rossa-filter-card .rossa-card__client-icons .rossa-btn--icon,
.rossa-reubicaciones-pendientes .rossa-card.rossa-filter-card .rossa-card__client-icons .rossa-btn--icon {
  background-color: var(--rossa-strip);
}
.rossa-init-container-bookings .rossa-card.rossa-filter-card .rossa-card__client-icons .rossa-btn--icon,
.rossa-init-container-bookings .rossa-card.rossa-filter-card .rossa-card__client-icons .rossa-btn--icon i,
.rossa-reubicaciones-pendientes .rossa-card.rossa-filter-card .rossa-card__client-icons .rossa-btn--icon,
.rossa-reubicaciones-pendientes .rossa-card.rossa-filter-card .rossa-card__client-icons .rossa-btn--icon i {
  color: var(--rossa-teal);
}
.rossa-init-container-bookings .rossa-card.rossa-filter-card .rossa-card__client-icons .rossa-btn--icon:hover,
.rossa-reubicaciones-pendientes .rossa-card.rossa-filter-card .rossa-card__client-icons .rossa-btn--icon:hover {
  background-color: var(--rossa-border);
}

/* Tarjetas de reubicación: la cabecera entera en coral. El naranja legacy
   (#EB5D37) va solo en los segmentos .rossa-card-tag-reubicacion y entre
   ellos asomaba la tira gris del header; se pinta el fondo completo con el
   token y los segmentos pasan a transparente para que quede uniforme. */
.rossa-card.rossa-filter-card .rossa-card-header:has(> .rossa-card-tag-reubicacion) {
  background-color: var(--rossa-coral);
}
.rossa-card.rossa-filter-card .rossa-card-header > .rossa-card-tag-reubicacion {
  background-color: transparent;
}

/*=============================================================================
  21. GLOBAL SMALL BUTTONS  (.rossa-btn / .rossa-btn-negative)
  ---------------------------------------------------------------------------
  Figma small buttons: primary = green #00a886 fill, white SemiBold, radius 5
  ("Botones rossa / Default 12", hover #04604b); secondary = white with petrol
  outline ("Botónes Oscuro / Secun Pequeño"). Replaces the legacy #005e66
  pills (radius 50px). Scoped exceptions keep their own look: the Inicio
  filter bar (§15, higher specificity) and .rossa-btn-primary (red, defined
  as a compound in pagina_inicio.css so it still wins). The .color-orange
  modifier is re-asserted because load order would otherwise erase it.
=============================================================================*/
.rossa-btn {
  background-color: var(--rossa-green-fig);
  border-radius: 5px;
  font-family: var(--rossa-font);
  font-weight: 600;
  line-height: 16px !important;     /* beats legacy 18px !important */
}
.rossa-btn:hover,
.rossa-btn:active { background-color: var(--rossa-green-dark); }
/* Icon-only chips (clock/SMS/WhatsApp on cards) stay circular */
.rossa-btn.rossa-btn--icon { border-radius: var(--rossa-radius-pill); }
.rossa-btn.color-orange { background-color: #eb5d37; }
.rossa-btn.color-orange:hover { background-color: #d44d2a; }
.rossa-btn.rossa-btn-primary:active { background-color: var(--rossa-red-dark); }
.rossa-btn-negative {
  border: 1px solid var(--rossa-petrol);
  color: var(--rossa-petrol);
  border-radius: 5px;
  font-family: var(--rossa-font);
  font-weight: 600;
}
.rossa-btn-negative:hover,
.rossa-btn-negative:active {
  background-color: var(--rossa-strip);
  border-color: var(--rossa-petrol);
  color: var(--rossa-petrol);
}
/* Generic inputs/selects sharing the Figma hairline-box language */
.rossa-select,
.rossa-input {
  border: 1px solid var(--rossa-hairline);
  border-radius: 0;
  background-color: var(--rossa-white);
  font-family: var(--rossa-font);
  color: var(--rossa-petrol);
}
.rossa-select:focus,
.rossa-input:focus {
  outline: none;
  border-color: var(--rossa-petrol);
  box-shadow: 0 0 0 3px rgba(32, 92, 104, .12);
}

/*=============================================================================
  22. PANELS & PAGE CHROME — airy Figma surfaces
  ---------------------------------------------------------------------------
  Kills the remaining gray boxes/gradients: tab panels lose their #999/#666
  borders (Figma is borderless under underline tabs), #contenido_padre loses
  its gradient, toggles/links/pagination adopt the brand colors.
=============================================================================*/
.secciones_tabs {
  border: 0;
  box-shadow: none;
  background: var(--rossa-white);
}
.rossa-init-container { border: 0; background: var(--rossa-white); }
#contenido_padre {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: 5px;
}
.admin_tit { border-bottom: 1px solid var(--rossa-border); }
/* Body links: legacy red underlined bold -> brand red, underline on hover */
p a,
ul.instrucciones li a {
  color: var(--rossa-red);
  text-decoration: none;
  font-weight: 600;
}
p a:hover,
ul.instrucciones li a:hover { text-decoration: underline; }
/* Pagination */
.paginacion { font-family: var(--rossa-font); color: var(--rossa-muted); }
.paginacion a {
  color: var(--rossa-petrol);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  text-decoration: none;
}
.paginacion a:hover { background: var(--rossa-strip); color: var(--rossa-petrol); }
.paginacion span { color: var(--rossa-navy); font-weight: 700; }
/* Legacy toggle switch: blue checked state -> Figma green */
input:checked + .slider_switch { background-color: var(--rossa-green-fig); }
/* Legacy yellow form fields -> clean hairline boxes (width/layout untouched) */
.campos input {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-hairline);
  color: var(--rossa-navy);
  font-family: var(--rossa-font);
  font-weight: 500;
}

/*=============================================================================
  23. FORM SURFACES — flat-gray cleanup (#efefef family)
  ---------------------------------------------------------------------------
  Replaces every flat-gray block background on form screens with the Figma
  surface language:
    content rows / zebra ........ var(--rossa-tint)   petrol @ 4%
    emphasis rows (TOTAL…) ...... var(--rossa-strip)  #eff2f3
    input-style gray fills ...... white + petrol hairline border
    panel wrappers .............. white + soft hairline border, radius 5
  Inventory: workflow sweep over admin/css/*.css + PHP inline styles.
  Selectors mirror the legacy compounds so they win by load order; !important
  only where the legacy rule (or an inline style) forces it.

  Reusable utilities for future markup:
    .rossa-surface         white panel + hairline border + radius
    .rossa-surface--tint   airy petrol wash (replaces #efefef)
    .rossa-surface--strip  Figma strip #eff2f3 (emphasis)
=============================================================================*/
.rossa-surface {
  background-color: var(--rossa-white);
  border: 1px solid var(--rossa-hairline-soft);
  border-radius: 5px;
}
.rossa-surface--tint  { background-color: var(--rossa-tint); }
.rossa-surface--strip { background-color: var(--rossa-strip); }

/* --- Add-reserva pricing board (the canonical offender) --- */
.total_reserva {
  background-color: var(--rossa-strip);
  color: var(--rossa-navy);
  font-family: var(--rossa-font);
  border-bottom: 1px solid var(--rossa-hairline-soft) !important; /* legacy #dedede !important */
}
#precio_total_admin_res {
  background-color: var(--rossa-strip);
  color: var(--rossa-navy);
  border-bottom: 1px solid var(--rossa-hairline-soft) !important;
}
/* Wash a la mitad de --rossa-tint (.04): estas filas conviven con la botonera
   fija de add_reserva, cuyo fondo --rossa-surface-2 quedaba casi indistinguible. */
.reservas_boards tr.tr_usos_boards td,
.reservas_boards tr.tr_usos_boards_mov td,
tr.tr_reservas_lineas td {
  background-color: rgba(32, 92, 104, .02);
  border-bottom: 1px solid var(--rossa-hairline-soft) !important;
}
/* Specificity buster del zebra */
table.estandar tbody tr.tr_usos_boards:not(.cab) td,
table.estandar tbody tr.tr_usos_boards_mov:not(.cab) td,
table.estandar tbody tr.tr_reservas_lineas:not(.cab) td {
  background-color: rgba(32, 92, 104, .02);
}
/* Cabecera de grupo estancia/uso: banda verde #37a580 cuyo texto blanco volvía
   ink por `table.estandar tr td`, y cuyo fondo el zebra de §18 (0,3,4) tapaba en
   filas pares (-> blanco sobre gris claro). Banda teal + texto blanco con id
   (1,2,0) para vencer a ambos en todas las filas. */
#contenido_admin .reservas_boards .cab_uso_reserva {
  background-color: var(--rossa-teal) !important;
  color: var(--rossa-white) !important;
}
#contenido_admin .reservas_boards .cab_uso_reserva .uso-title { color: var(--rossa-white) !important; }
/* Estancia SIN disponibilidad */
#contenido_admin .reservas_boards tr.maxshow-0 .cab_uso_reserva {
  background-color: var(--rossa-muted) !important;
  color: var(--rossa-white) !important;
}
#contenido_admin .reservas_boards tr.maxshow-0 .cab_uso_reserva .capacity-label,
#contenido_admin .reservas_boards tr.maxshow-0 .cab_uso_reserva .capacity-value { color: var(--rossa-white); }
/* El icono vive sobre un círculo casi blanco (rgba(255,255,255,.9)): en las
   disponibles va en verde, aquí en gris — nunca en blanco (sería invisible). */
#contenido_admin .reservas_boards tr.maxshow-0 .cab_uso_reserva .capacity-icon i { color: var(--rossa-muted); }
/* Y sus filas de tarifas se atenúan en gris suave para que el bloque entero se
   lea como inactivo. */
#contenido_admin .reservas_boards tr:has(input:disabled) td,
#contenido_admin .reservas_boards tr:has(select:disabled) td {
  background-color: var(--rossa-surface);
  color: var(--rossa-muted);
}
#contenido_admin .reservas_boards tr:has(input:disabled) td a,
#contenido_admin .reservas_boards tr:has(select:disabled) td a { color: var(--rossa-muted); }
#contenido_admin .reservas_boards tr:has(input:disabled) input:disabled,
#contenido_admin .reservas_boards tr:has(select:disabled) select:disabled {
  background-color: var(--rossa-surface);
  border-color: var(--rossa-border);
  color: var(--rossa-muted);
  opacity: 1;   /* el gris ya lo da el color, no un lavado del navegador */
}
/* add_reserva paso 2 (Estancias y servicios): banda "Huéspedes" (.subtitle-tr) con
   texto ink sobre teal -> banda teal sólida + texto blanco; y los inputs de conteo
   (.guest-input) y de importe/concepto del descuento que §18 estira a 320px -> anchos
   sensatos y alineados. Adultos/Menores: lydia da flex:1 + min-width:200px a cada
   columna, lo que las estira a media fila y aleja las etiquetas -> columnas al ancho
   del contenido y fila centrada. */
#contenido_admin .subtitle-tr td { background-color: var(--rossa-teal) !important; }
#contenido_admin .subtitle-tr td,
#contenido_admin .subtitle-tr td span { color: var(--rossa-white) !important; }
#contenido_admin .guest-count .guest-input { width: 72px; max-width: 72px; text-align: center; }
/* Layout fijo: Adultos y Menores quedan juntos en una línea (no crecen ni se parten) y
   las edades de los menores caen SIEMPRE en su propia línea. Evita que en pantallas
   anchas se descuelgue alguna columna a otra fila. */
#contenido_admin .guest-info-row { flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 15px 40px; }
#contenido_admin .guest-info-col { flex: 0 0 auto; min-width: 0; text-align: center; }
#contenido_admin .guest-info-row .minor-ages { flex: 1 0 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; }
#contenido_admin .guest-info-col .guest-type,
#contenido_admin .guest-info-col .guest-count { justify-content: center; }
#contenido_admin #cod-descuento-tipo { width: 150px; max-width: 150px; }
#contenido_admin #concepto_descuento { width: 200px; max-width: 200px; }
#contenido_admin #cod-valor { width: 80px; max-width: 80px; text-align: right; }
/* Servicios (SPA/Parking, etc.): dos grupos separados (precio | cantidad), cada uno
   en columna con su texto de pie centrado debajo del control ("total"/"día" bajo el
   input de precio; "máx. total N" bajo el desplegable). Se alinean por arriba
   (vertical-align:top) para que el input de precio y el desplegable queden en la
   misma línea, sin que los pies empujen los controles. */
#contenido_admin .ser-cell .ser-price,
#contenido_admin .ser-cell .ser-qty {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  vertical-align: top; width: 96px;
}
#contenido_admin .ser-cell .ser-price { margin-right: 20px; }
/* ancho de columna fijo: sin esto, la columna crece al ancho del pie "máx. total N"
   (más largo en unas filas que en otras) y descentra el grupo, desplazando los inputs
   entre filas. El select se fija al mismo ancho que el input para que no lo estire. */
#contenido_admin .ser-cell .ser-qty select.num_habs { width: 72px; max-width: 72px; }
#contenido_admin .ser-cell .ser-unit,
#contenido_admin .ser-cell .ser-max {
  color: var(--rossa-muted); font-size: 12px;
  white-space: nowrap; text-align: center;
}
/* Descuento: Tipo/Concepto/Valor centrados en una fila que envuelve como bloques
   completos (antes el input de valor caía suelto bajo Concepto). */
#contenido_admin .descuento-campos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 10px;
}
#contenido_admin .descuento-campos .desc-tipo-label { font-weight: 600; color: var(--rossa-ink); }
.tr_reservas_lineas[class~="guests-tr"] td { background-color: rgba(32, 92, 104, .02); }
tr.errorpar td { background-color: var(--rossa-tint); border-bottom: 1px solid var(--rossa-hairline-soft); }

/* --- ver_reserva.css surfaces --- */
.rossa-separator--new   { background-color: var(--rossa-hairline-soft); }
.rossa-table tbody tr:nth-child(odd)  { background-color: var(--rossa-white); }
.rossa-table tbody tr:nth-child(even) { background-color: var(--rossa-tint); }
.rossa-btn--destacado,
.rossa-btn--destacado:hover,
.rossa-btn--destacado:active { background-color: var(--rossa-strip); }

/* §6's opt-in .rossa-table: gray separated rows -> white + hairline (the
   left cyan accent and radii are kept) */
.rossa-table tbody td {
  background-color: var(--rossa-white);
  border-bottom: 1px solid var(--rossa-hairline-soft);
}

/* --- Generic gray panels / utility blocks (lydia.css) --- */
.secart,
.bloqueconfig {
  background-color: var(--rossa-white);
  border: 1px solid var(--rossa-hairline-soft);
  border-radius: 5px;
}
.grayBlock { background-color: var(--rossa-strip); }
.blonewtl  { background-color: var(--rossa-white); border: 1px solid var(--rossa-hairline-soft); }
#mensajetextos {
  background-color: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: 8px;
  box-shadow: var(--rossa-shadow);
}

/* --- Lotes / availability grids: gray input fills -> hairline boxes --- */
.campo_editable_lotes,
.cierre_editable_lotes,
.campo_tipo_lotes,
#tipo_dispestancia_lotes_global,
#cierre_lotes_global,
#checkinout_disponible_global {
  background-color: var(--rossa-white);
  border: 1px solid var(--rossa-hairline-soft);
}
.lote_disp, .lote_precio, .lote_mindia { background-color: var(--rossa-tint); }
div#contenedor_creador_lotes select,
div#contenedor_creador_lotes input,
.tipo_precio_lotes {
  background-color: var(--rossa-white);
  border: 1px solid var(--rossa-hairline-soft);
}
.day_calendar input { background-color: var(--rossa-white); border: 1px solid var(--rossa-hairline-soft); }

/* --- Setup wizard (complete_setup.css) --- */
.section, .room-container, .use-container {
  background-color: var(--rossa-white);
  border: 1px solid var(--rossa-hairline-soft);
}
.stay-header, .room-header, .use-header { background-color: var(--rossa-strip); }
.multi-language-field label { background-color: var(--rossa-strip); }
.language-tab { background-color: var(--rossa-white); border-color: var(--rossa-hairline-soft); }

/* --- Form components / selector tables --- */
.services-selector th,
.physical-rooms-field th {
  background-color: var(--rossa-white);
  color: var(--rossa-navy);
  border-bottom: 1px solid var(--rossa-hairline);
}
.services-selector tr:nth-child(even),
.physical-rooms-field tr:nth-child(even) { background-color: var(--rossa-tint); }

/* --- Config suplementos / DB maintenance / iCal --- */
.batch-edit-panel,
.results-container {
  background-color: var(--rossa-white);
  border: 1px solid var(--rossa-hairline-soft);
}
.supplements-table th {
  background-color: var(--rossa-white);
  color: var(--rossa-navy);
  border-bottom: 1px solid var(--rossa-hairline);
}
.results-table tr:nth-child(even) { background-color: var(--rossa-tint); }
.results-table tr:hover { background-color: var(--rossa-strip); }
.ical-admin .table th,
#logsContent .table th {
  background-color: var(--rossa-white);
  color: var(--rossa-navy);
  border-bottom: 1px solid var(--rossa-hairline);
}
.ical-admin .table input[type="text"] { background-color: var(--rossa-white); }

/* --- Simple-table selects (gray pills) --- */
table.rossa_table_estandar select {
  background-color: var(--rossa-white);
  border: 1px solid var(--rossa-hairline);
  border-radius: 0;
}

/* --- gestion_reservas badges built on #ECF0F1 --- */
.rossa-bkg__content { background-color: var(--rossa-strip); }
.rossa-bkg__child-triangle { border-color: var(--rossa-strip) transparent transparent transparent; }

/* --- PHP-emitted inline grays (need !important to beat style="...") --- */
tr[style*="ECF0F1"] { background-color: var(--rossa-tint) !important; }       /* add_services_current.php */
.condition-row, .custom-field-row { background-color: var(--rossa-white) !important; border: 1px solid var(--rossa-hairline-soft) !important; }
.shortcodes-legend { background-color: var(--rossa-strip) !important; }
/* asigProfiles in-body <style> hover — beatable: rossa.css loads after it */
#perfiles_fact tbody tr:hover { background-color: var(--rossa-strip); }
/* Reservation cards: 20px pill radius -> cleaner 10px (header/footer inherit) */
.rossa-card.rossa-filter-card { border-radius: 10px; border-color: var(--rossa-border); }

/*=============================================================================
  24. FEEDBACK — alerts inline (shared building block)
  ---------------------------------------------------------------------------
  Markup:
    <div class="rossa-alert rossa-alert--success">
      <i class="fas fa-check-circle"></i><div>Text</div>
    </div>
  Legacy .ok/.error are also re-skinned (text-only paragraphs) so the screens
  that use them inherit the same look without markup changes.
=============================================================================*/
.rossa-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--rossa-font);
  font-size: 14px;
  font-weight: 700; /* Work Sans only loads 100/400/700: 600 would be faux-bold */
  color: var(--rossa-ink);
  background: var(--rossa-surface-2);
  border: 1px solid var(--rossa-border);
  border-left: 4px solid var(--rossa-muted);
  border-radius: var(--rossa-radius);
  padding: 12px 16px;
  margin: 10px 0;
}
.rossa-alert i { margin-top: 1px; }
.rossa-alert--success { border-left-color: var(--rossa-green); background: #ebf7f3; }
.rossa-alert--success i { color: var(--rossa-green); }
.rossa-alert--error   { border-left-color: var(--rossa-red); background: var(--rossa-salmon); }
.rossa-alert--error i { color: var(--rossa-red); }
.rossa-alert--warning { border-left-color: var(--rossa-coral); background: #fdf3e7; }
.rossa-alert--warning i { color: var(--rossa-coral); }
.rossa-alert--info    { border-left-color: var(--rossa-cyan); background: #eef6fa; }
.rossa-alert--info i  { color: var(--rossa-cyan); }

/* Legacy feedback paragraphs/blocks inherit the new look (no markup change
   needed). Covers .ok/.error (p y div) and the p.mensaje_error variant so all
   feedback inside the admin content speaks the same visual language. */
#contenido_admin p.ok,
#contenido_admin div.ok,
#contenido_admin p.error,
#contenido_admin div.error,
#contenido_admin p.mensaje_error {
  display: block;
  width: auto;
  font-family: var(--rossa-font);
  font-size: 14px;
  background: #ebf7f3;
  border: 1px solid var(--rossa-border);
  border-left: 4px solid var(--rossa-green);
  border-radius: var(--rossa-radius);
  color: var(--rossa-ink);
  padding: 12px 16px;
  margin: 10px 0;
}
#contenido_admin p.error,
#contenido_admin div.error,
#contenido_admin p.mensaje_error {
  background: var(--rossa-salmon);
  border-left-color: var(--rossa-red);
}

/* Extra tag flavor used by status pills (Activo). Texto ink: blanco sobre
   #19ac8a queda en 2.87:1, por debajo del AA 4.5:1. */
.rossa-tag--green { background-color: var(--rossa-green); color: var(--rossa-ink); border-color: var(--rossa-green); }
/* Outline/soft tag (e.g. roles regulares) */
.rossa-tag--soft { background-color: var(--rossa-white); color: var(--rossa-muted); border-color: var(--rossa-border); }

/* Ghost secondary button (Cancelar / acciones secundarias) */
.admin_boton--ghost {
  background-color: var(--rossa-white);
  border-color: var(--rossa-border);
  color: var(--rossa-ink);
}
.admin_boton--ghost:hover {
  background-color: var(--rossa-surface);
  border-color: #c7cfcf;
  color: var(--rossa-ink);
}

/*=============================================================================
  25. SCREEN: User manager (list + edit)
  ---------------------------------------------------------------------------
  Layout follows "Gestión de clientes" (filters+table) and "Ver reserva"
  (cards). Selectors are .rossa-users-scoped or use distinct names to avoid
  collisions (e.g. .rossa-toggle instead of .rossa-switch, which already
  exists in rossa_components.css).
=============================================================================*/

/* --- List view -------------------------------------------------------- */
.rossa-users-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 18px 0 6px;
}
.rossa-users-toolbar .rossa-field { display: inline-flex; align-items: center; gap: 8px; }
.rossa-users-toolbar label {
  font-family: var(--rossa-font);
  font-weight: 700;
  font-size: 13px;
  color: var(--rossa-ink);
}
/* "Add user" button: left-aligned, below the filters */
.rossa-users-actions { margin: 14px 0 6px; }
.rossa-users-count {
  font-family: var(--rossa-font);
  font-size: 13px;
  color: var(--rossa-muted);
  margin: 4px 0 10px;
}
.rossa-table-scroll { overflow-x: auto; }

/* Uppercase/muted header for the user table only; the .rossa-table base
   (§6) is left untouched. */
.rossa-table--usuarios thead th {
  color: var(--rossa-muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .04em;
}
.rossa-table--usuarios td { font-family: var(--rossa-font); font-size: 14px; }
/* AA contrast for the gray pill on these screens (base §5 untouched) */
.rossa-table--usuarios .rossa-tag--gray,
.rossa-perm .rossa-tag--gray { color: var(--rossa-ink); }
.rossa-table--usuarios .rossa-users-muted { color: var(--rossa-muted); }
/* Inactive user row: dimmed */
.rossa-table--usuarios tr.rossa-users-row--off td { opacity: .62; }
/* Actions column aligned to the right */
.rossa-table--usuarios th:last-child,
.rossa-table--usuarios td:last-child { text-align: right; }
/* On small screens the columns get narrow; center every cell so the pills and
   actions don't cling to the left edge. */
@media (max-width: 700px) {
  .rossa-table--usuarios th,
  .rossa-table--usuarios td,
  .rossa-table--usuarios th:last-child,
  .rossa-table--usuarios td:last-child { text-align: center; }
}

/* Per-row action buttons: icon ghost buttons */
.rossa-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--rossa-radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--rossa-teal);
  font-size: 16px;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease;
}
/* Specificity buster: los <a> heredaban el azul legacy de los enlaces
   (#contenido_admin a:link = 1,1,1); mismo peso aquí, gana por orden. */
#contenido_admin a.rossa-iconbtn,
#contenido_admin a.rossa-iconbtn:link,
#contenido_admin a.rossa-iconbtn:visited,
#contenido_admin a.rossa-iconbtn:hover { color: var(--rossa-teal); }
.rossa-iconbtn:hover { background: rgba(0, 94, 102, .10); }
.rossa-iconbtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .25);
}
.rossa-iconbtn--danger,
#contenido_admin a.rossa-iconbtn--danger,
#contenido_admin a.rossa-iconbtn--danger:link,
#contenido_admin a.rossa-iconbtn--danger:visited,
#contenido_admin a.rossa-iconbtn--danger:hover { color: var(--rossa-red); }
.rossa-iconbtn--danger:hover { background: var(--rossa-salmon); }
.rossa-iconbtn--danger:focus-visible { box-shadow: 0 0 0 3px rgba(231, 0, 76, .25); }
.rossa-iconbtn--muted { color: var(--rossa-muted); }
.rossa-iconbtn--muted:hover { background: var(--rossa-surface); color: var(--rossa-ink); }

/* --- Edit view: panel layout ------------------------------------------ */
.rossa-users-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 14px;
}
@media (max-width: 1200px) {
  .rossa-users-grid { grid-template-columns: minmax(0, 1fr); }
}
/* No content for the right column (non-superuser editing themselves) */
.rossa-users-grid--single { grid-template-columns: minmax(0, 1fr); }
.rossa-users-grid__col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.rossa-panel {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-shadow: var(--rossa-shadow);
  overflow: hidden;
}
.rossa-panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--rossa-surface-2);
  border-bottom: 1px solid var(--rossa-border);
  font-family: var(--rossa-font);
  font-weight: 700;
  font-size: 14px;
  color: var(--rossa-teal);
}
.rossa-panel__head i { font-size: 14px; }
.rossa-panel__head .rossa-panel__aside {
  margin-left: auto;
  font-weight: 400;
  font-size: 12px;
  color: var(--rossa-muted);
}
.rossa-panel__body { padding: 16px 18px; }

/* Collapsible panels: clickable header + rotating chevron */
.rossa-panel--collapsible > .rossa-panel__head {
  cursor: pointer;
  user-select: none;
}
.rossa-panel--collapsible > .rossa-panel__head:hover { background: var(--rossa-surface); }
.rossa-panel--collapsible > .rossa-panel__head:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(0, 94, 102, .25);
}
.rossa-panel__chevron {
  margin-left: 10px;
  color: var(--rossa-muted) !important;
  transition: transform .15s ease;
  flex: 0 0 auto;
}
/* With no aside (counter), the chevron pushes itself to the right */
.rossa-panel__head > .rossa-panel__chevron:last-child { margin-left: auto; }
.rossa-panel__head .rossa-panel__aside + .rossa-panel__chevron { margin-left: 10px; }
.rossa-panel--collapsed > .rossa-panel__body { display: none; }
.rossa-panel--collapsed > .rossa-panel__head .rossa-panel__chevron { transform: rotate(-90deg); }

.rossa-panel__intro {
  font-family: var(--rossa-font);
  font-size: 13px;
  color: var(--rossa-muted);
  margin: 0 0 14px;
}

/* Form rows: label on the left, control on the right */
.rossa-form-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 8px 0;
}
.rossa-form-row > label,
.rossa-form-row > .rossa-form-label {
  flex: 0 0 150px;
  font-family: var(--rossa-font);
  font-weight: 700;
  font-size: 13px;
  color: var(--rossa-ink);
  padding-top: 9px;
}
.rossa-form-row > div { flex: 1 1 auto; min-width: 0; }
.rossa-form-row input[type="text"],
.rossa-form-row input[type="email"],
.rossa-form-row input[type="password"] {
  width: 100%;
  max-width: 360px;
  padding: 8px 14px;
  box-sizing: border-box; /* without this, padding widens each field differently */
}
@media (max-width: 640px) {
  .rossa-form-row { flex-direction: column; gap: 4px; }
  .rossa-form-row > label, .rossa-form-row > .rossa-form-label { flex-basis: auto; padding-top: 0; }
}
.rossa-help {
  font-family: var(--rossa-font);
  font-size: 12px;
  color: var(--rossa-muted);
  line-height: 1.45;
}
.rossa-help--error { color: var(--rossa-red); }

/* Password field: two icon buttons INSIDE the field (generate + eye) */
.rossa-passfield { position: relative; max-width: 360px; }
.rossa-passfield input { width: 100%; padding-right: 76px !important; box-sizing: border-box; }
/* Edge adds its own native reveal eye: hide it so we don't show two */
.rossa-passfield input::-ms-reveal,
.rossa-passfield input::-ms-clear { display: none; }
.rossa-passfield__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--rossa-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: var(--rossa-radius);
}
.rossa-passfield__btn--eye { right: 4px; }
.rossa-passfield__btn--generate { right: 38px; }

/* jquery-validate flags invalid fields with the .error class, which inherits
   global styles that change its width and padding. We restore the geometry and
   use a subtle error state (border + red halo). */
.rossa-form-row input.error,
.rossa-passfield input.error {
  width: 100% !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border: 1px solid var(--rossa-red) !important;
  border-radius: var(--rossa-radius) !important;
  box-shadow: 0 0 0 3px rgba(231, 0, 76, .12);
  background-color: var(--rossa-white);
}
.rossa-passfield input.error { padding-right: 76px !important; }
/* The error label jquery-validate injects inherits the same box; we turn it
   into a small red help line */
.rossa-form-row label.error {
  display: block;
  width: auto !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent;
  font-family: var(--rossa-font);
  font-size: 12px;
  font-weight: 700;
  color: var(--rossa-red);
  text-align: left;
}
.rossa-passfield__btn:hover { color: var(--rossa-teal); background: var(--rossa-surface); }
.rossa-passfield__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .25);
}

/* Password requirements checklist, aligned with the server-side rules.
   State classes use the is- prefix to avoid clashing with the global
   .ok/.error styles. */
.rossa-pass-checks {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-family: var(--rossa-font);
  font-size: 12px;
  color: var(--rossa-muted);
}
.rossa-pass-checks li {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 2px 0;
  background: transparent;
  border: 0;
  width: auto;
  text-align: left;
  cursor: default;
}
.rossa-pass-checks li i { width: 14px; text-align: center; font-size: 11px; }
.rossa-pass-checks li.is-ok { color: var(--rossa-green); }
.rossa-pass-checks li.is-ko { color: var(--rossa-red); }

/* Toggle (Active) — distinct name so it doesn't clash with .rossa-switch */
.rossa-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.rossa-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.rossa-toggle__track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #c9d1d3;
  transition: background-color .15s ease;
  flex: 0 0 auto;
}
.rossa-toggle__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rossa-white);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: left .15s ease;
}
.rossa-toggle input:checked + .rossa-toggle__track { background: var(--rossa-green); }
.rossa-toggle input:checked + .rossa-toggle__track::after { left: 23px; }
.rossa-toggle input:focus-visible + .rossa-toggle__track { box-shadow: 0 0 0 3px rgba(0, 94, 102, .25); }
.rossa-toggle__text { font-family: var(--rossa-font); font-weight: 700; font-size: 13px; color: var(--rossa-ink); }

/* --- Edit view: permissions catalogue --------------------------------- */
.rossa-perm-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 10px;
}
.rossa-perm-tools__group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 220px;
  max-width: 340px;
  min-width: 0;
}
.rossa-perm-tools__group .rossa-help { margin-top: 0; }
.rossa-perm-tools select,
.rossa-perm-tools input[type="search"] { padding: 7px 12px; box-sizing: border-box; width: 100%; }
.rossa-perm-tools label {
  font-family: var(--rossa-font);
  font-weight: 700;
  font-size: 13px;
  color: var(--rossa-ink);
}
.rossa-perm-tools label i { color: var(--rossa-teal); margin-right: 4px; }
.rossa-perm-counter {
  margin-left: auto;
  font-family: var(--rossa-font);
  font-size: 12px;
  font-weight: 700;
  color: var(--rossa-teal);
  background: rgba(0, 94, 102, .08);
  border-radius: var(--rossa-radius-pill);
  padding: 6px 12px;
  white-space: nowrap;
}

.rossa-perm-cat { margin-bottom: 6px; }
.rossa-perm-cat__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rossa-font);
  font-weight: 700;
  font-size: 13px;
  color: var(--rossa-teal);
  border-bottom: 2px solid var(--rossa-teal);
  padding: 6px 2px;
  margin: 12px 0 6px;
}
.rossa-perm-cat__title .rossa-perm-cat__count { margin-left: auto; color: var(--rossa-muted); font-weight: 400; font-size: 12px; }

.rossa-perm {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 8px;
  border-radius: var(--rossa-radius);
  cursor: pointer;
  transition: background-color .12s ease;
}
.rossa-perm:hover { background: var(--rossa-surface-2); }
.rossa-perm input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--rossa-teal);
  cursor: pointer;
}
.rossa-perm__body { flex: 1 1 auto; min-width: 0; }
.rossa-perm__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rossa-font);
  font-weight: 700;
  font-size: 14px;
  color: var(--rossa-ink);
}
.rossa-perm__name i { font-size: 13px; color: var(--rossa-muted); }
.rossa-perm__desc {
  font-family: var(--rossa-font);
  font-size: 12.5px;
  color: var(--rossa-muted);
  line-height: 1.45;
  margin-top: 2px;
}
.rossa-perm__code {
  font-family: Consolas, Menlo, monospace;
  font-size: 11px;
  color: var(--rossa-muted);
  background: var(--rossa-surface);
  border: 1px solid var(--rossa-border);
  border-radius: 4px;
  padding: 1px 6px;
}
.rossa-perm--legacy .rossa-perm__name { color: var(--rossa-muted); }
.rossa-perm--legacy { border: 1px dashed var(--rossa-border); }
.rossa-perm--hidden { display: none; }

/* Scope / fees / payment methods (superuser-only panels) */
.rossa-users-scope-choice { display: flex; gap: 18px; margin-bottom: 12px; }
.rossa-users-scope-choice label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--rossa-font);
  font-weight: 700;
  font-size: 13px;
  color: var(--rossa-ink);
  cursor: pointer;
}
.rossa-users-scope-choice input[type="radio"] { accent-color: var(--rossa-teal); }
.rossa-users-checklist label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--rossa-font);
  font-size: 13.5px;
  color: var(--rossa-ink);
  padding: 5px 6px;
  border-radius: var(--rossa-radius);
  cursor: pointer;
}
.rossa-users-checklist label:hover { background: var(--rossa-surface-2); }
.rossa-users-checklist input[type="checkbox"] { accent-color: var(--rossa-teal); width: 16px; height: 16px; }

/* Action bar anchored at the very bottom of the content area: cancel + save
   always visible and centered. bottom:0 — the footer now sits over the menu
   column (left:0 / width:260px), so the bar clears it by starting at left:260px. */
.rossa-form-actions {
  position: fixed;
  left: 260px;                    /* = #menu width; clears the footer column */
  right: 0;
  bottom: 0;
  z-index: 981;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 14px 20px;
  background: var(--rossa-surface-2);
  border-top: 1px solid var(--rossa-border);
  box-shadow: 0 -2px 10px rgba(20, 40, 60, .07);
  box-sizing: border-box;
  transition: left .7s ease;      /* follows the #menu collapse in lockstep */
}
/* Follow the collapsed sidebar, same as #footer */
body.showhidemenu .rossa-form-actions { left: 60px; }
@media (max-width: 700px) {
  /* botonera a ancho completo en móvil (independiente del estado del menú) */
  .rossa-form-actions,
  body.showhidemenu .rossa-form-actions { left: 0; }
  /* apartar el botón flotante de DevTools (errorVysor) por encima de la botonera
     fija para que no la tape en móvil */
  body:has(.rossa-form-actions) .dvt-toggle { bottom: 84px !important; }
  /* responsive.css declara `#contenido_admin */
  #contenido_admin:has(.rossa-form-actions) { padding-bottom: 84px !important; }
}
/* The bar is fixed (out of flow); reserve space so it never covers the last
   panel of the form (on top of the footer space the body already reserves). */
#contenido_admin:has(.rossa-form-actions) { padding-bottom: 84px; }

/* Match padding of the bar buttons so they sit centered at the same height,
   overriding the inherited values of .admin_boton and input/button.admin_boton. */
.rossa-form-actions .admin_boton {
  margin: 0;
  min-width: 110px;
  padding: 9px 16px;
}

/* Compact scope-by-hierarchy tree: each establishment shows once, nested under
   its grouping or under "No grouping". */
.rossa-scope-tree {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rossa-scope-group {
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  overflow: hidden;
}
.rossa-scope-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  /* The checkbox and chevron set the height; when a grouping becomes covered
     both are hidden, so a min-height keeps the row from shrinking and shifting
     the content below. */
  min-height: 44px;
  box-sizing: border-box;
  background: var(--rossa-surface-2);
  cursor: pointer;
  font-family: var(--rossa-font);
}
/* The header collapses/expands; the checkbox+icon zone selects */
.rossa-scope-head:hover { background: #e9eeee; }
.rossa-scope-head > i,
.rossa-scope-select i { color: var(--rossa-teal); }
.rossa-scope-select {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  /* Roomy click area without changing the visible geometry */
  padding: 9px;
  margin: -9px;
}
.rossa-scope-head input[type="checkbox"],
.rossa-scope-item input[type="checkbox"] {
  accent-color: var(--rossa-teal);
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  cursor: pointer;
}
.rossa-scope-name { font-weight: 700; font-size: 13.5px; color: var(--rossa-ink); }
.rossa-scope-meta {
  font-size: 12px;
  color: var(--rossa-muted);
  margin-left: auto;
  white-space: nowrap;
}
.rossa-scope-children {
  display: flex;
  flex-direction: column;
  padding: 4px 10px 6px 30px;
}
.rossa-scope-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 6px;
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  cursor: pointer;
}
.rossa-scope-item:hover { background: var(--rossa-surface-2); }
.rossa-scope-item i { color: var(--rossa-muted); font-size: 12px; width: 14px; text-align: center; }
/* Sub-groupings: teal icon to tell them apart from establishments */
.rossa-scope-item--subgroup i { color: var(--rossa-teal); }
.rossa-scope-item .rossa-scope-name { font-weight: 400; font-size: 13px; }

/* Rooms per establishment: the counter expands the list as chips */
.rossa-scope-est-block { display: flex; flex-direction: column; }
.rossa-scope-est-toggle {
  margin-left: auto;
  border: 0;
  background: transparent;
  font-family: var(--rossa-font);
  font-size: 12px;
  color: var(--rossa-muted);
  white-space: nowrap;
  cursor: pointer;
  padding: 3px 7px;
  border-radius: var(--rossa-radius);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.rossa-scope-est-toggle:hover { background: var(--rossa-surface); color: var(--rossa-teal); }
.rossa-scope-est-toggle i { font-size: 10px; transition: transform .15s ease; }
.rossa-scope-est-toggle.is-open i { transform: rotate(180deg); }
.rossa-scope-estancias {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 6px 8px 37px;
}
.rossa-scope-estancia {
  font-family: var(--rossa-font);
  font-size: 11px;
  color: var(--rossa-ink);
  background: var(--rossa-surface);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius-pill);
  padding: 3px 9px;
}

/* "Included" tags: hidden until their grouping is checked */
.rossa-scope-included,
.rossa-scope-covered-tag { display: none; font-size: 10px; padding: 4px 9px; margin-left: 8px; }

/* Checked grouping: its children become covered (no checkbox, dimmed) */
.rossa-scope-group.is-on > .rossa-scope-children .rossa-scope-item { opacity: .75; cursor: default; }
.rossa-scope-group.is-on > .rossa-scope-children input.js-scope-est,
.rossa-scope-group.is-on > .rossa-scope-children input.js-scope-subgroup { display: none; }
.rossa-scope-group.is-on > .rossa-scope-children .rossa-scope-included { display: inline-block; }

/* Grouping covered by another checked grouping */
.rossa-scope-group.is-covered { opacity: .75; }
.rossa-scope-group.is-covered > .rossa-scope-head input { display: none; }
.rossa-scope-group.is-covered > .rossa-scope-head .rossa-scope-covered-tag { display: inline-block; }
.rossa-scope-group.is-covered > .rossa-scope-children { display: none; }
.rossa-scope-group.is-covered > .rossa-scope-head .rossa-scope-collapse { display: none; }

/* Collapse/expand button for a grouping */
.rossa-scope-collapse {
  border: 0;
  background: transparent;
  color: var(--rossa-muted);
  width: 26px;
  height: 26px;
  border-radius: var(--rossa-radius);
  cursor: pointer;
  flex: 0 0 auto;
  margin-left: 4px;
}
.rossa-scope-collapse:hover { background: var(--rossa-surface); color: var(--rossa-teal); }
.rossa-scope-collapse:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .25);
}
.rossa-scope-collapse i { transition: transform .15s ease; }
.rossa-scope-group.is-collapsed > .rossa-scope-head .rossa-scope-collapse i { transform: rotate(-90deg); }
.rossa-scope-group.is-collapsed > .rossa-scope-children { display: none; }

/* SAT badge in headers */
.rossa-users-satbadge {
  font-family: var(--rossa-font);
  font-size: 11px;
  font-weight: 700;
  color: var(--rossa-white);
  background: var(--rossa-teal);
  border-radius: var(--rossa-radius-pill);
  padding: 3px 10px;
  letter-spacing: .03em;
}

/* --- Previsualización de estancias del ámbito: botón + modal -------------- */
.rossa-scope-preview {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rossa-border);
  text-align: center;
}
.rossa-scope-preview__btn { display: inline-flex; align-items: center; gap: 7px; }

.rossa-modal[id^="modal-"] {
  z-index: 2000;
}

.rossa-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(22, 41, 45, .45);
}
.rossa-modal-overlay.is-open { display: flex; }
.rossa-modal-overlay .rossa-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  background: var(--rossa-white);
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  color: var(--rossa-ink);
  overflow: hidden;
}
.rossa-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rossa-border);
}
.rossa-modal__title { margin: 0; font-size: 17px; font-weight: 700; color: var(--rossa-ink); }
.rossa-modal-overlay .rossa-modal__close {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  color: var(--rossa-muted);
  padding: 0 4px;
}
.rossa-modal-overlay .rossa-modal__close:hover { color: var(--rossa-red); }
.rossa-modal__sub { margin: 0; padding: 12px 20px 0; font-size: 13px; color: var(--rossa-muted); }
.rossa-modal__body { padding: 12px 20px 16px; overflow-y: auto; flex: 1 1 auto; }
.rossa-modal__foot {
  display: flex;
  justify-content: flex-end;
  padding: 12px 20px;
  border-top: 1px solid var(--rossa-border);
}
.rossa-modal__empty { margin: 8px 0; color: var(--rossa-muted); font-style: italic; }

.rossa-modal-stays { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rossa-modal-stays li {
  padding: 7px 12px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  font-size: 14px;
  color: var(--rossa-ink);
}

.rossa-modal-estgroup { margin-bottom: 14px; }
.rossa-modal-estgroup__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--rossa-teal);
  margin-bottom: 6px;
}
.rossa-modal-estgroup__name i { color: var(--rossa-teal); }
.rossa-modal-estgroup__count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--rossa-muted);
  background: var(--rossa-surface);
  border-radius: var(--rossa-radius-pill);
  padding: 2px 9px;
}
.rossa-modal-estgroup__rooms { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 22px; }
.rossa-modal-estgroup__rooms--empty { color: var(--rossa-muted); font-style: italic; font-size: 13px; padding-left: 22px; }
.rossa-modal-room {
  font-size: 13px;
  color: var(--rossa-ink);
  background: var(--rossa-surface);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius-pill);
  padding: 3px 11px;
}
/* Accesible (incluida) vs excluida (tachada), como la vista previa antigua */
.rossa-modal-room.is-on {
  color: var(--rossa-ink);
  background: var(--rossa-white);
  border-color: var(--rossa-teal);
}
.rossa-modal-room.is-off {
  color: var(--rossa-muted);
  background: transparent;
  border-color: var(--rossa-border);
  text-decoration: line-through;
  opacity: .7;
}
/* Establecimiento sin ninguna estancia accesible: cabecera atenuada */
.rossa-modal-estgroup.is-none .rossa-modal-estgroup__name,
.rossa-modal-estgroup.is-none .rossa-modal-estgroup__name i { color: var(--rossa-muted); }

/* =====================================================================
   AYUDA CONTEXTUAL: disparador "?" al final del <h1> que abre un
   .rossa-modal (§25). Convención de proyecto (docs/CONVENTIONS.md): las
   leyendas/ayudas van en un modal abierto desde este icono, no en botones
   sueltos. El icono lo inyecta por JS la propia pantalla en su <h1>.
   ===================================================================== */
/* El badge "?" reutiliza el componente existente span.rossa-help (§27, el mismo
   de gestor_pedidos); no necesita CSS propio. El JS de la pantalla lo inyecta en
   el <h1> y lo enlaza para abrir el .rossa-modal al click. */

/*=============================================================================
  15. type="datepicker" SUPPORT
  ---------------------------------------------------------------------------
  Project convention: jQuery-UI date inputs use type="datepicker" (browsers
  treat unknown types as text). Legacy responsive.css only matched these via
  input[type="text"] — these mirrors keep the mobile sizing after the flip.
=============================================================================*/
@media (max-width: 1100px){
  .bloqueportada table.estandar tr td input[type="datepicker"]{
    width: 100% !important;
  }
}
@media (max-width: 780px){
  table.estandar tr td input[type="datepicker"]{
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
  }
}

/*=============================================================================
  16. TIPPY TOOLTIPS (tippy.js v4) — black bubble -> Figma style
  ---------------------------------------------------------------------------
  White box, teal 1px border, teal bold Work Sans, rounded, NO arrow (per the
  Figma reference). Wins over tippy's JS-injected base stylesheet by document
  order (rossa.css footer copy loads after <head>). Backdrop covered so the
  material-fill animation never flashes dark.
=============================================================================*/
.tippy-popper .tippy-tooltip {
  background-color: #e9eaec;           /* sampled from reference (unchanged) */
  color: #41484b;                      /* darker, near-black grey text */
  border: 1px solid #b6bcbf;           /* darker visible border */
  border-radius: 12px;
  font-family: var(--rossa-font);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
  padding: 9px 16px;
  box-shadow: 0 4px 12px rgba(40, 50, 60, .08);
  text-shadow: none;
}
.tippy-popper .tippy-arrow,
.tippy-popper .tippy-roundarrow { display: none; }
.tippy-popper .tippy-backdrop { background-color: #e9eaec; }

/*=============================================================================
  20. SCREEN: gestor_estancias_lotes — full re-skin (Figma language)
  ---------------------------------------------------------------------------
  CSS-ONLY by JS contract (submit-time pruning + strict parent()/children()
  chains forbid moving nodes). Replaces the legacy baby-blue design:
  #95D5F1 panels / #3498db white-text cards / green selection / red 740px
  save button / 750px scroll-trap. Module CSS loads in-<head>; this section
  wins from the footer copy. !important only where the module uses it.
=============================================================================*/

/* Layout: breathe, and kill the inner scroll-trap (page scrolls naturally) */
#contenedor_creador_lotes { max-width: 1040px; gap: 14px; }
#contenedor_doble_lotes   { gap: 14px; }
#contenedor_estancias_lotes {
  max-height: none;
  overflow: visible;
  gap: 14px;
  padding: 4px 0;
}

/* Panels: baby-blue -> white cards, readable type */
#panel_principal_lotes,
#panel_atajos_lotes,
#weekdays_container {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: 10px;
  padding: 16px 18px;
  color: var(--rossa-ink);
  font-family: var(--rossa-font);
}
#panel_principal_lotes { font-size: 14px; }      /* was .65em */
#panel_atajos_lotes p, #panel_principal_lotes p { font-size: 14px; }
#weekdays_container h3 {
  color: var(--rossa-navy);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  margin: 0 0 8px;
}
#contenedor_doble_lotes hr {
  border: 0;
  border-top: 1px solid var(--rossa-hairline-soft);
  margin: 10px 0;
}

/* Estancia cards: blue/white-text -> white card, ink text, navy name band */
.cuadro_estancia_lotes {
  background: var(--rossa-white);
  color: var(--rossa-ink);
  border: 1px solid var(--rossa-border);
  border-radius: 10px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.cuadro_estancia_lotes p:first-child {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--rossa-navy);
  border-bottom: 1px solid var(--rossa-hairline-soft);
  padding-bottom: 6px;
}
.cuadro_estancia_lotes .bloq_cierre_canal,
.cuadro_estancia_lotes .bloq_disp_canal,
.cuadro_estancia_lotes .bloq_disp_web { font-size: 13px; }
.disponibilidad_maxima_lotes { color: var(--rossa-muted); font-size: 12px; }

/* Uso tiles: fluid white tiles instead of fixed 156px blue blocks */
.cuadro_uso_lotes {
  background: var(--rossa-white);
  color: var(--rossa-ink);
  border: 1px solid var(--rossa-border);
  border-radius: 8px;
  width: auto;
  min-width: 0;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.campo_valor_uso { width: 64px; text-align: center; }

/* Hover + SELECTED states: teal tint + teal border (selection must read
   instantly — it decides what gets POSTed). Module's green uses !important. */
.cuadro_estancia_lotes:hover:not(.selectedstay),
.cuadro_uso_lotes:hover:not(.selecteduso) {
  background: rgba(0, 94, 102, .05);
  border-color: var(--rossa-teal);
}
.cuadro_estancia_lotes.selectedstay,
.cuadro_uso_lotes.selecteduso {
  background: rgba(0, 94, 102, .12) !important;
  border: 2px solid var(--rossa-teal) !important;
  color: var(--rossa-ink) !important;
}

/* Round toggles: select-all + weekday chips -> teal language */
.selectall_lotes {
  background: var(--rossa-white);
  border: 2px solid var(--rossa-teal);
}
.selectall_lotes:checked { background: var(--rossa-teal); border-color: var(--rossa-teal); }
.lote_dias {
  background: var(--rossa-white);
  border: 2px solid var(--rossa-border);
}
.lote_dias:checked { background: var(--rossa-teal); border-color: var(--rossa-teal); }
.weekday-label { color: var(--rossa-ink); font-weight: 700; }

/* Bulk-fill buttons: blue -> teal outline secondaries */
.boton_fill_lotes {
  background: var(--rossa-white);
  color: var(--rossa-teal);
  border: 1px solid var(--rossa-teal);
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 14px;
  cursor: pointer;
}
.boton_fill_lotes:hover { background: var(--rossa-teal); color: var(--rossa-white); }

/* Save: red 740px slab -> primary teal, centered, honest disabled state */
#realizar_cambios_lotes {
  width: auto;
  min-width: 300px;
  max-width: 100%;
  display: block;
  margin: 18px auto;
  background: var(--rossa-teal);
  color: var(--rossa-white);
  border: 1px solid var(--rossa-teal);
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 28px;
  cursor: pointer;
}
#realizar_cambios_lotes:enabled:hover { background: #00474d; border-color: #00474d; }
#realizar_cambios_lotes:disabled {
  background: #f2f4f5;
  border-color: var(--rossa-border);
  color: #9aa3a3;
  cursor: not-allowed;
}

/* --- 20b. lotes: heavy artillery — the module's blue panels survived the
   polite overrides, so these are boosted + !important. Plus centering and
   aligned control rows. CSS only; jQuery .show()/.hide() still works because
   display comes from CSS (flex) and hide() inlines none. --- */
#contenedor_gestor_lotes #panel_principal_lotes,
#contenedor_gestor_lotes #panel_atajos_lotes,
#contenedor_gestor_lotes #weekdays_container,
#panel_principal_lotes,
#panel_atajos_lotes,
#weekdays_container {
  background: var(--rossa-white) !important;
  border: 1px solid var(--rossa-border) !important;
  border-radius: 10px !important;
  color: var(--rossa-ink) !important;
}

/* Fullscreen page container: inline-block + 280px padding + no width was
   overflowing the viewport horizontally (title cut off, page scrolled).
   Make it a normal block that fits the viewport, padding inside the box. */
#contenido_admin.contenido_admin_fullscreen {
  display: block;
  float: none;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}

/* Center the whole module */
#contenedor_gestor_lotes {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#contenedor_creador_lotes { margin: 0 auto; }

/* Unselected cards are WHITE — guaranteed. (Another section was tinting all
   cards, which made the real teal SELECTED state invisible by comparison.) */
.cuadro_estancia_lotes:not(.selectedstay),
.cuadro_uso_lotes:not(.selecteduso) {
  background: var(--rossa-white) !important;
  border: 1px solid var(--rossa-border) !important;
}
.cuadro_estancia_lotes:hover:not(.selectedstay),
.cuadro_uso_lotes:hover:not(.selecteduso) {
  background: rgba(0, 94, 102, .05) !important;
  border-color: var(--rossa-teal) !important;
}

/* Even, full-width card grid (no ragged right edge) */
#contenedor_estancias_lotes {
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  justify-content: center;
}

/* Control rows: label + field on one line, uniform heights */
#panel_principal_lotes p {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0;
  font-weight: 600;
}
#panel_principal_lotes p br { display: none; }   /* "Desde … Hasta …" one row */
#panel_atajos_lotes p {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0;
  font-weight: 600;
}
#panel_principal_lotes select,
#panel_principal_lotes input,
#panel_atajos_lotes select,
#panel_atajos_lotes input[type="text"] {
  height: 36px;
  box-sizing: border-box;
}
.multiple-actions-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}

/* Weekdays: centered chip row */
.weekdays-selector {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.weekday-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Estancia cards: tighter, centered content */
.cuadro_estancia_lotes { padding: 12px 14px; }
.cuadro_estancia_lotes p:first-child { margin: 0 0 8px; }

/*=============================================================================
  21. MOBILE CHROME (≤700px — matches the legacy breakpoint)
  ---------------------------------------------------------------------------
  Pure CSS on the EXISTING toggle mechanics (no JS): on phones the server adds
  .mobile + auto-applies body.showhidemenu (Lydia_Script.js:907), and clicking
  outside the menu re-collapses it. So:
    collapsed (showhidemenu, the mobile default) = the #menu itself shrunk to a
      42px hamburger button (top-right), only #hidemenu visible as ☰;
    expanded = full-height off-canvas drawer with touch-sized items.
  Header: logo + user name only; Panel/Desconectar collapse to icon pills.
=============================================================================*/
@media (max-width: 700px){

  /* --- HEADER: ☰ left / logo CENTER / user buttons right, no user name --- */
  #toolbar { min-height: 48px; padding: 4px 12px 4px 60px; gap: 8px; font-size: 13px; }
  #toolbar #portal,
  #toolbar #fechahora { display: none; }
  #toolbar #toolbarlogo {
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    background: none;
  }
  #toolbar #logo_lidia { width: 38px; height: 38px; }
  #toolbar #nombreuser {
    margin-left: 0;
    margin-right: 0;
    font-size: 0;        /* hides the "Hola: SAT" text nodes */
    gap: 0;
  }
  /* Panel / Desconectar -> compact icon pills (text collapsed via font-size:0) */
  #panel_user, #descon {
    height: 34px; width: 38px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }
  /* Iconos de las pills como MÁSCARA Lucide (no Font Awesome), tintadas con el
     color del texto de la pill (teal usuario / rojo logout). */
  #panel_user::before, #descon::before {
    content: "";
    display: inline-block;
    width: 18px; height: 18px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
    -webkit-mask-position: center;    mask-position: center;
    -webkit-mask-size: contain;       mask-size: contain;
  }
  #panel_user::before { -webkit-mask-image: url("https://cdn.rossa.app/icons/circle-user.svg"); mask-image: url("https://cdn.rossa.app/icons/circle-user.svg"); }
  #descon::before     { -webkit-mask-image: url("https://cdn.rossa.app/icons/log-out.svg");     mask-image: url("https://cdn.rossa.app/icons/log-out.svg"); }
  /* "Crear reserva" -> compact icon-only pill (matches the account pills) */
  #toolbar #btn-crear-reserva { padding: 0; width: 38px; height: 34px; justify-content: center; gap: 0; }
  #toolbar #btn-crear-reserva .rossa-tb-label { display: none; }
  #toolbar #btn-crear-reserva i { font-size: 20px; margin-left: 0; transform: translateY(1px); }   /* "+" centrado en la barra móvil (anula el margin/transform de escritorio) */
  #contenedor_absoluto { padding-top: 52px !important; padding-left: 0 !important; }

  /* --- CONTENT: menu overlays — kill every menu-era offset, use full width --- */
  #contenido_admin,
  body.showhidemenu #contenido_admin {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
  }

  /* --- MENU collapsed (mobile default) = hamburger button, top-right --- */
  body.showhidemenu #menu {
    width: 38px; height: 34px; min-height: 34px;   /* matches the 38x34 icon pills */
    padding: 0; margin: 0;
    top: 7px; left: 12px; right: auto;             /* same midline as the pills */
    background: var(--rossa-white);
    border: 1px solid var(--rossa-teal);
    border-radius: var(--rossa-radius);
    overflow: hidden;
    z-index: 260;
  }
  body.showhidemenu #menu .panel_admin,
  body.showhidemenu #menu #capa_logo { display: none; }
  body.showhidemenu #menu #hidemenu {
    width: 100%; height: 100%;
    margin: 0; padding: 0;
    justify-content: center;
    align-items: center;
    color: var(--rossa-teal);
  }
  body.showhidemenu #menu #hidemenu span { display: none; }
  /* Hamburguesa como MÁSCARA Lucide (icono menu), no glifo Font Awesome. */
  body.showhidemenu #menu #hidemenu::before {
    content: "";
    display: inline-block;
    width: 20px; height: 20px;
    background-color: currentColor;
    -webkit-mask: url("https://cdn.rossa.app/icons/menu.svg") no-repeat center;   mask: url("https://cdn.rossa.app/icons/menu.svg") no-repeat center;
    -webkit-mask-size: contain;   mask-size: contain;
    transform: none;   /* aquí es hamburguesa, no la flecha girada del §10 */
  }

  /* --- MENU expanded = off-canvas drawer, touch-sized --- */
  body:not(.showhidemenu) #menu {
    position: fixed;
    width: 100%;                       /* Figma #3: lista a ancho completo */
    height: calc(100vh - 48px); min-height: 0;
    top: 48px; left: 0; margin: 0; padding: 4px 0;
    z-index: 1000;
    overflow-y: auto; overflow-x: hidden;
    box-shadow: 0 12px 24px rgba(0, 48, 60, .12);
  }
  body:not(.showhidemenu) #menu .panel_admin a,
  body:not(.showhidemenu) #menu .panel_admin a.menugroup { padding: 12px 8px; font-size: 15px; }
  body:not(.showhidemenu) #menu .panel_admin a .txtmenu,
  body:not(.showhidemenu) #menu .panel_admin a.menugroup .txtmenu { width: auto; font-size: 15px; opacity: 1; }
  /* The generic mobile rule above collapses item padding to 8px, which jams the
     sub-item text against its tree node dot (the dot is absolutely placed at
     ~13px). Restore the left indent for 2nd-level sub-items so text clears the
     dot. (Higher specificity than the generic `…panel_admin a` rule above.) */
  body:not(.showhidemenu) #menu .rossa-submenu__items li a { padding-left: 22px; }

  /* --- FOOTER: back into document flow (a fixed footer steals phone space) --- */
  #footer {
    position: static !important;
    left: auto !important;
    padding: 10px 12px;
    font-size: 11px;
  }
  body:has(#footer) { padding-bottom: 0 !important; }

  /* --- MOBILE TYPOGRAPHY: tighter scale --- */
  #contenido_admin h1 { font-size: 20px !important; }          /* was ~24 */
  #contenido_admin h2 { font-size: 14px !important; }
  #contenido_admin h3 { font-size: 13px !important; }
  #contenido_admin h1 + p,
  #cabecera_texto p { font-size: 12px !important; }            /* page descriptions */
}

/*=============================================================================
  22. PORTAL TITLE (#portal — the alojamiento name in the header)
  ---------------------------------------------------------------------------
  Figma: property name in bold navy Work Sans next to the logo. Replaces the
  legacy italic underlined Times New Roman. The legacy margin-left:80px is
  !important, so the reset must be too (same specificity, later load wins).
=============================================================================*/
/* Tamaño: el mismo cuerpo que los h1 de pantalla (23px). El nombre del
   alojamiento es el rótulo de mayor jerarquía de la cabecera, así que no puede
   ir por debajo del título del apartado. min-width:0 + ellipsis: en la barra
   flex, un nombre muy largo empujaría a los botones de cuenta en lugar de
   recortarse. */
#toolbar #portal {
  margin-left: 18px !important;
  min-width: 0;
  font-size: 20px;
}
#toolbar #portal a {
  display: block;
  overflow: hidden;
  font-family: var(--rossa-font);
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--rossa-navy);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 0;
}
#toolbar #portal a:hover { color: var(--rossa-teal); }

/*=============================================================================
  23. ver_reserva SECONDARY BUTTONS — re-assert Figma white-outline
  ---------------------------------------------------------------------------
  A later global repaint made .rossa-btn green-filled; elements carrying the
  secondary variants (--default/--reserva/--negative: "Marcar como", Guardar
  cambios, Página reserva…) inherited the green bg with dark text = illegible.
  Figma: secondary = white, ink text, hairline border. !important to outrank
  the repaint's own forced declarations.
=============================================================================*/
.rossa-btn--default,
.rossa-btn--reserva,
.rossa-btn--negative {
  background: var(--rossa-teal) !important;     /* match the app-wide buttons */
  color: var(--rossa-white) !important;
  border: 1px solid var(--rossa-teal) !important;
  border-radius: var(--rossa-radius) !important;
  font-weight: 700;
}
.rossa-btn--default:hover,
.rossa-btn--reserva:hover,
.rossa-btn--negative:hover {
  background: #00474d !important;
  border-color: #00474d !important;
  color: var(--rossa-white) !important;
}

/*=============================================================================
  24. FOOTER "PAGE CONTINUES" HINT (desktop, where the footer is fixed)
  ---------------------------------------------------------------------------
  Content scrolls behind the fixed footer and gets hard-cut. A white fade
  above the bar makes truncated content visibly "dissolve" — the universal
  cue that there's more below. Extra body padding so the last element can
  always scroll fully clear of the bar.
=============================================================================*/
@media (min-width: 701px){
  /* Footer now sits over the left sidebar column, not over the content, so the
     old viewport-wide "content continues" fade + z-index-under-sidebar + extra
     body padding no longer apply. The hairline above the credit (#footer::before
     in the base block) stays. */
}

/*=============================================================================
  25. VER RESERVA — TAB MODE (pairs with the sanctioned tab script in
  ver_reserva.php). Figma: text tabs w/ teal underline; one full-width panel.
=============================================================================*/
.rossa-tabbar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  width: 100%;
  max-width: none;
  margin: 4px 0 20px;
  border-bottom: 1px solid var(--rossa-border);
  background: var(--rossa-white);
  position: sticky;
  top: 74px;
  z-index: 30;
}
.rossa-tabbar__tab i {
  margin-right: 7px;
  font-size: 12px;
}
.rossa-tabbar__tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font-family: var(--rossa-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rossa-muted);
  cursor: pointer;
}
.rossa-tabbar__tab:hover { color: var(--rossa-ink); }
.rossa-tabbar__tab--active { color: var(--rossa-teal); border-bottom-color: var(--rossa-teal); }

#contenido_admin.isiframe .vr-page-head { display: none; }
#contenido_admin.isiframe .rossa-tabbar { top: 0; }

.rossa-tab-hidden { display: none !important; }

/* In tab mode each tab shows ONE card and KEEPS the original card look
   (white rounded ~560px panel, centered). The two-column booking layout
   collapses to a single centered column so the active card sits in the middle;
   the per-block nav buttons and the floating decorative icons are replaced by
   the tab bar above. No full-width "screen" reshaping — cards as they were. */
body.rossa-tabs-on .rossa-ctr__buttons { display: none !important; }
body.rossa-tabs-on .rossa-ctr__icon { display: none !important; }
body.rossa-tabs-on .rossa-ctr-booking { display: block; }
body.rossa-tabs-on .rossa-ctr-booking__column,
body.rossa-tabs-on .rossa-ctr-booking__content {
  width: 100%;
  max-width: none;
  float: none;
  display: block;
}
/* center the card; its bg / 30px radius / max-width:560px come from rossa_components.css */
body.rossa-tabs-on .rossa-ctr-block { margin: 0 auto 30px; }
/* Timeline + the comms log/chat tail are not 560px cards — give them room, centered */
body.rossa-tabs-on .rossa-ctr-block--timeline { max-width: 980px; }
body.rossa-tabs-on .rossa-vr-extra { max-width: 980px; margin: 0 auto; }

@media (max-width: 700px){
  .rossa-tabbar { gap: 0; top: 48px; flex-wrap: nowrap; }
  .rossa-tabbar__tab { flex: 1 1 0; padding: 11px 4px; font-size: 0; display: flex; align-items: center; justify-content: center; }
  .rossa-tabbar__tab i { margin-right: 0; font-size: 18px; }

  body.rossa-tabs-on h1.vr-hide {
    display: block !important;
    margin: 0 0 16px;
    font: 700 22px/1.25 var(--rossa-font);
    letter-spacing: -0.01em;
    color: var(--rossa-ink);
  }
}

/* Chrome shadows OFF (user request): side menu, header, footer */
#menu, #toolbar, #toplydia, #footer { box-shadow: none !important; }

/*=============================================================================
  30. VER RESERVA — TAB PANEL LAYOUT (replantea el panel activo de §25)
  ---------------------------------------------------------------------------
  El panel activo ocupa el ancho de contenido (plano) en vez de una tarjeta de
  560px centrada. Carga después de §25 y solo afecta a body.rossa-tabs-on.
=============================================================================*/
/* Panel = superficie plana a ancho de contenido */
body.rossa-tabs-on .rossa-ctr-block {
  width: 100%;
  max-width: none;
  margin: 0 0 28px;
  padding: 0 0 16px;
  background: transparent;
  border-radius: 0;
}
body.rossa-tabs-on .rossa-ctr {
  width: 100% !important;
  align-items: stretch;
  padding: 0;
}
/* Título del bloque: cabecera de sección alineada a la izquierda.
   En pagos el h1 cuelga de .rossa-ctr__main-content, no del .rossa-ctr, así que
   el selector de hijo directo lo dejaba fuera (salía centrado y sin filete). */
body.rossa-tabs-on .rossa-ctr > h1,
body.rossa-tabs-on .rossa-ctr > .rossa-ctr__main-content > h1 {
  text-align: left;
  font-size: 20px;
  margin: 0 0 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rossa-border);
}
body.rossa-tabs-on .rossa-ctr__main-content { width: 100%; }
body.rossa-tabs-on .rossa-separator { width: 100%; margin: 16px 0; }

/* Grupos de botones: de columna/rejilla fija -> fila compacta que envuelve */
body.rossa-tabs-on .rossa-ctr__btn-status,
body.rossa-tabs-on .rossa-ctr__btn-card,
body.rossa-tabs-on .rossa-ctr__btn-iva,
body.rossa-tabs-on .rossa-ctr__btn-bill,
body.rossa-tabs-on .rossa-ctr__btn-tipo-facturacion,
body.rossa-tabs-on .rossa-ctr__btn-huespedes,
body.rossa-tabs-on .rossa-ctr__btn-comunicaciones {
  display: flex !important;
  flex-direction: row !important;   /* varios grupos eran column legacy: los botones se apilaban */
  flex-wrap: wrap;
  gap: 10px;
  width: auto !important;
  max-width: none !important;
  grid-template-columns: none !important;
  align-items: center;
}
/* Botones compactos como en el resto de la app (no losas a 100%) */
body.rossa-tabs-on .rossa-ctr .rossa-btn--default,
body.rossa-tabs-on .rossa-ctr .rossa-btn--reserva,
body.rossa-tabs-on .rossa-ctr .rossa-btn--negative {
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 9px 16px !important;
  border-radius: var(--rossa-radius) !important;
}

/* Estado de pago: el grid 2-col separaba la caja de sus botones a 540px de
   distancia. Pasa a fila: caja + "Marcar como" juntos, alineados arriba/izq. */
body.rossa-tabs-on .rossa-ctr__status-payment {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 32px;
  width: 100%;
}
body.rossa-tabs-on .rossa-ctr__btn-status { align-content: flex-start; }
/* "Marcar como" (h3) ocupa toda la fila, encima de sus botones */
body.rossa-tabs-on .rossa-ctr__btn-status > h3 { flex: 0 0 100%; margin: 0 0 4px; }

/* Filas etiqueta+control (tarjeta, IVA, factura, tipo facturación, comentarios):
   eran space-between al 90% (etiqueta y control a extremos opuestos de 1080px).
   Se agrupan a la izquierda con una separación cómoda. */
body.rossa-tabs-on .rossa-ctr__credit-card,
body.rossa-tabs-on .rossa-ctr__iva,
body.rossa-tabs-on .rossa-ctr__bill,
body.rossa-tabs-on .rossa-ctr__tipo-facturacion,
body.rossa-tabs-on .rossa-ctr__commentary {
  width: 100% !important;
  justify-content: flex-start !important;
  align-items: center;
  gap: 24px;
}
/* "Hay Tarjeta" ocupaba width:100% y empujaba sus botones al borde derecho */
body.rossa-tabs-on .rossa-ctr__content-card { width: auto; flex: 0 1 auto; }

/* Comentarios: título+botón a la izquierda, textarea con ancho razonable */
body.rossa-tabs-on .rossa-ctr__commentary { align-items: flex-start; }
body.rossa-tabs-on .rossa-ctr__textarea { align-items: stretch; flex: 1 1 320px; max-width: 520px; }
body.rossa-tabs-on .rossa-ctr__textarea .rossa-textarea,
body.rossa-tabs-on .rossa-ctr__textarea textarea { width: 100%; box-sizing: border-box; }

/* Componente de transacciones/pagos: su contenedor centraba todo en columna.
   Alineado a la izquierda para aprovechar el ancho como el resto del panel. */
body.rossa-tabs-on .rossa-ctr__payment-try { align-items: flex-start; width: 100%; }

/* Comunicaciones: las secciones Teléfono/Email iban centradas mientras los
   botones de envío van a la izquierda -> alineo todo a la izquierda */
body.rossa-tabs-on .rossa-ctr__communications { width: 100%; align-items: flex-start; }
body.rossa-tabs-on .rossa-ctr__communications form { justify-content: flex-start; }

/* --- Alturas de control uniformes */
body.rossa-tabs-on .rossa-ctr .rossa-input,
body.rossa-tabs-on .rossa-ctr select,
body.rossa-tabs-on .rossa-ctr input[type="number"],
body.rossa-tabs-on .rossa-ctr input[type="time"],
body.rossa-tabs-on .rossa-ctr input[type="text"],
body.rossa-tabs-on .rossa-ctr input[type="email"],
body.rossa-tabs-on .rossa-ctr input[type="datepicker"] {
  height: 36px;
  box-sizing: border-box;
}
body.rossa-tabs-on .rossa-ctr__iva,
body.rossa-tabs-on .rossa-ctr__bill,
body.rossa-tabs-on .rossa-ctr__tipo-facturacion,
body.rossa-tabs-on .rossa-ctr__credit-card,
body.rossa-tabs-on .rossa-ctr__data-iva,
body.rossa-tabs-on .rossa-ctr__data-bill,
body.rossa-tabs-on .rossa-ctr__data-tipo-facturacion,
body.rossa-tabs-on .rossa-ctr__content-card { align-items: center; }

/* --- Grupos de botones independientes: fila a la izquierda, ancho completo
   (Reserva, Huéspedes y los de envío de Comunicaciones quedaban centrados o
   apretados en una columna estrecha) ------------------------------------- */
body.rossa-tabs-on .rossa-ctr__btn-huespedes,
body.rossa-tabs-on .rossa-ctr__btn-comunicaciones {
  width: 100% !important;
  justify-content: flex-start;
}

/* --- Estado de pago: la caja a la izquierda y los botones "Marcar como"
   ocupando el resto del ancho y fluyendo en fila (no en columna estrecha) - */
body.rossa-tabs-on .rossa-ctr__btn-status { flex: 1 1 340px; }

/* --- Nº huéspedes: input y Guardar a la misma altura, en línea ----------- */
body.rossa-tabs-on #bloque-guests .rossa-ctr__commentary { align-items: center; }
body.rossa-tabs-on #form_num_huespedes { display: inline-flex; align-items: center; gap: 8px; }

/* --- Anti-FOUC: hasta que el conmutador de pestañas arranca (DOMContentLoaded)
   se veían TODAS las tabs a la vez. Con body.vr-preinit (lo quita el script de
   pestañas tras el primer activate()) ocultamos todo menos la pestaña activa
   por defecto (Resumen). Degrada bien: si :has() no existe, queda en blanco un
   instante en vez de mostrar todo de golpe. */
body.rossa-tabs-on.vr-preinit .rossa-ctr-block,
body.rossa-tabs-on.vr-preinit .rossa-vr-extra { display: none !important; }
body.rossa-tabs-on.vr-preinit .rossa-ctr-block:has(#bloque-resumen) { display: flex !important; }

/* --- Jerarquía visual de botones (UX) */
body.rossa-tabs-on .rossa-ctr .rossa-btn--default,
body.rossa-tabs-on .rossa-ctr .rossa-btn--negative {
  background: var(--rossa-white) !important;
  color: var(--rossa-teal) !important;
  border: 1px solid var(--rossa-border) !important;
}
body.rossa-tabs-on .rossa-ctr .rossa-btn--default:hover,
body.rossa-tabs-on .rossa-ctr .rossa-btn--default:active,
body.rossa-tabs-on .rossa-ctr .rossa-btn--negative:hover,
body.rossa-tabs-on .rossa-ctr .rossa-btn--negative:active {
  background: var(--rossa-tint) !important;
  border-color: var(--rossa-teal) !important;
  color: var(--rossa-teal) !important;
}
body.rossa-tabs-on .rossa-ctr .rossa-btn--cancelar,
body.rossa-tabs-on .rossa-ctr .rossa-btn--sinrem,
body.rossa-tabs-on .rossa-ctr .rossa-btn--red {
  background: var(--rossa-salmon) !important;
  color: var(--rossa-coral) !important;
  border: 1px solid var(--rossa-salmon) !important;
}
body.rossa-tabs-on .rossa-ctr .rossa-btn--cancelar:hover,
body.rossa-tabs-on .rossa-ctr .rossa-btn--sinrem:hover,
body.rossa-tabs-on .rossa-ctr .rossa-btn--red:hover {
  background: rgba(234, 92, 54, .14) !important;   /* salmón un punto más intenso, no relleno naranja */
  color: var(--rossa-coral) !important;
  border-color: var(--rossa-coral) !important;
}

/* "Más acciones" (Cliente): separa el icono del texto (iban pegados) */
body.rossa-tabs-on #toggle-edit-datos-cliente { align-items: center; gap: 6px; }

/* --- Reserva: barra de acciones en UNA fila */
body.rossa-tabs-on #bloque-reserva .rossa-ctr__huespedes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
}
body.rossa-tabs-on #bloque-reserva .rossa-ctr__huespedes > .rossa-ctr__btn-huespedes {
  width: auto !important;
}
/* el grupo que contiene Cancelar se empuja al extremo derecho de la fila */
body.rossa-tabs-on #bloque-reserva .rossa-ctr__huespedes > .rossa-ctr__btn-huespedes:has(.rossa-btn--cancelar) {
  margin-left: auto;
}
/* avisos y separadores ocupan su propia línea completa */
body.rossa-tabs-on #bloque-reserva .rossa-ctr__huespedes > .rossa-notice,
body.rossa-tabs-on #bloque-reserva .rossa-ctr__huespedes > .rossa-separator {
  flex-basis: 100%;
}

/* --- Pagos: ayuda de "Marcar como" --------------------------------------
   Los textos de ayuda (.rossa-caption) eran #00303C (oscuro) sobre botones
   teal -> sin contraste. Dentro de los botones primarios van en blanco. */
body.rossa-tabs-on #bloque-pagos .rossa-btn--reserva .rossa-caption {
  color: rgba(255, 255, 255, .92) !important;
}

/* --- Pagos y Cliente: campos de comentarios */
body.rossa-tabs-on #bloque-pagos .rossa-ctr__commentary,
body.rossa-tabs-on #bloque-cliente .rossa-ctr__commentary {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 12px;
  width: 100%;
}
body.rossa-tabs-on #bloque-pagos .rossa-ctr__data-commentary,
body.rossa-tabs-on #bloque-pagos .rossa-ctr__data-accesseshour,
body.rossa-tabs-on #bloque-cliente .rossa-ctr__data-commentary,
body.rossa-tabs-on #bloque-cliente .rossa-ctr__data-accesseshour {
  display: contents;
}
/* título: su propia línea completa */
body.rossa-tabs-on #bloque-pagos .rossa-ctr__commentary .rossa-subtitle,
body.rossa-tabs-on #bloque-cliente .rossa-ctr__commentary .rossa-subtitle {
  flex: 0 0 100%;
  order: 0;
  margin: 0;
}
/* textarea: ocupa el ancho disponible a la izquierda */
body.rossa-tabs-on #bloque-pagos .rossa-ctr__textarea,
body.rossa-tabs-on #bloque-cliente .rossa-ctr__textarea {
  order: 1;
  flex: 1 1 auto;
  width: auto;
  max-width: none;            /* el textarea usa el ancho disponible (no 640) */
  align-items: stretch;
  justify-content: flex-start;
}
/* botón: a la derecha del textarea */
body.rossa-tabs-on #bloque-pagos .rossa-ctr__commentary .rossa-btn,
body.rossa-tabs-on #bloque-cliente .rossa-ctr__commentary .rossa-btn {
  order: 2;
  flex: 0 0 auto;
}
body.rossa-tabs-on #bloque-pagos .rossa-ctr__textarea textarea,
body.rossa-tabs-on #bloque-pagos .rossa-ctr__textarea .rossa-textarea,
body.rossa-tabs-on #bloque-cliente .rossa-ctr__textarea textarea,
body.rossa-tabs-on #bloque-cliente .rossa-ctr__textarea .rossa-textarea {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* --- Cliente "Más acciones" */
body.rossa-tabs-on #bloque-cliente .rossa-ctr__client-buttons {
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}
/* "Cambiar cliente:" */
body.rossa-tabs-on #bloque-cliente .rossa-ctr__client-buttons > h2 {
  flex: 0 0 100%;
  margin: 0;
}
body.rossa-tabs-on #bloque-cliente .rossa-ctr__fact { align-items: flex-start; width: 100%; }
/* los 4 botones de "Cambiar cliente": prioridad alta = relleno teal (tono oscuro) */
body.rossa-tabs-on #bloque-cliente .rossa-ctr__client-buttons .rossa-btn--default {
  background: var(--rossa-teal) !important;
  color: var(--rossa-white) !important;
  border: 1px solid var(--rossa-teal) !important;
}
body.rossa-tabs-on #bloque-cliente .rossa-ctr__client-buttons .rossa-btn--default:hover,
body.rossa-tabs-on #bloque-cliente .rossa-ctr__client-buttons .rossa-btn--default:active {
  background: var(--rossa-petrol-dark) !important;
  border-color: var(--rossa-petrol-dark) !important;
  color: var(--rossa-white) !important;
}

/* --- Cliente "Más acciones": toggle claro + área en tarjeta + jerarquía ---- */
body.rossa-tabs-on #toggle-edit-datos-cliente {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  padding: 8px 14px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  font: 700 13px/1 var(--rossa-font);
  color: var(--rossa-teal);
  cursor: pointer;
}
body.rossa-tabs-on #toggle-edit-datos-cliente:hover { border-color: var(--rossa-teal); background: var(--rossa-tint); }
body.rossa-tabs-on #edit_datos_cliente {
  margin-top: 12px;
  padding: 18px 22px 20px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: 12px;
}
/* sub-títulos del área: labels subordinados (no compiten con las secciones teal) */
body.rossa-tabs-on #edit_datos_cliente h2,
body.rossa-tabs-on #edit_datos_cliente .rossa-subtitle {
  font: 700 13px/1.3 var(--rossa-font) !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  color: var(--rossa-ink) !important;
  margin: 0 0 4px !important;
}
/* "Cambiar cliente:" como label de su grupo, no como h2 grande */
body.rossa-tabs-on #edit_datos_cliente .rossa-ctr__client-buttons > h2 { flex: 0 0 100%; }
body.rossa-tabs-on #bloque-cliente .rossa-ctr__row {
  width: 100%;
  justify-content: flex-start;
  gap: 16px;
}

/* --- Pagos: Transacciones -> 2 columnas (Pagos recurrentes | Devoluciones) */
body.rossa-tabs-on #bloque-pagos .rossa-grid-auto-200 {
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: none;            /* Transacciones a 50/50 usando TODO el ancho */
  gap: 18px;
}
body.rossa-tabs-on #bloque-pagos .rossa-grid-auto-200 > * { width: auto; min-width: 0; }
body.rossa-tabs-on #bloque-pagos .rossa-card-transaction { height: 100%; box-sizing: border-box; }
@media (max-width: 700px){
  body.rossa-tabs-on #bloque-pagos .rossa-grid-auto-200 { grid-template-columns: 1fr; }
}

/* --- Timeline: separar el botón "Ver todo el RTL" */
body.rossa-tabs-on #bloque-timeline .admin_boton.admin_ok { margin-top: 22px; }

/* Tarjetas de transacciones (Pagos recurrentes / Devoluciones): 2 por fila */
body.rossa-tabs-on .rossa-ctr__grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  justify-content: stretch;
}

/* Flujo alineado a la izquierda */
body.rossa-tabs-on .rossa-ctr p:not(.mensaje_error) { text-align: left; }
body.rossa-tabs-on .rossa-ctr__data-client {
  align-items: flex-start;
  width: 100%;
  margin-bottom: 4px;
}
body.rossa-tabs-on .rossa-ctr__client-name { font-size: 16px; font-weight: 700; }

/* Banda de datos de la reserva (Cód./Fecha/Check-in/Origen): 4 celdas
   alineadas a la izquierda en vez de apelotonarse con auto-fill */
body.rossa-tabs-on .rossa-box__dates {
  grid-template-columns: repeat(auto-fit, minmax(150px, 190px));
  justify-content: start;
  gap: 12px 32px;
  padding: 4px 0;
}
body.rossa-tabs-on .rossa-ctr__title {
  justify-content: flex-start;
  height: auto;
  margin-bottom: 6px;
}
body.rossa-tabs-on .rossa-ctr__dates-content { align-items: flex-start; height: auto; }
body.rossa-tabs-on .rossa-ctr__dates-content p { text-align: left; }

/* Toggle "Más acciones": a la izquierda, no centrado en una banda vacía */
body.rossa-tabs-on #toggle-edit-datos-cliente { display: inline-flex; }
body.rossa-tabs-on .rossa-ctr > div[style*="text-align: center"] { text-align: left !important; }

/*=============================================================================
  26. ROSSA-SCREEN — scaffolding for the remade Ver reserva tabs
  ---------------------------------------------------------------------------
  Uniform structure used by the rebuilt blocks: head (title + actions),
  sections separated by hairlines, label/value field grids. Figma language:
  white surface, ink text, teal accents, left-flowing form reading.
=============================================================================*/
.rossa-screen__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--rossa-border);
  margin-bottom: 18px;
}
.rossa-screen__heading {
  margin: 0;
  font-family: var(--rossa-font);
  font-size: 20px;
  font-weight: 700;
  color: var(--rossa-ink);
}
.rossa-screen__heading i { color: var(--rossa-teal); margin-right: 10px; font-size: 17px; }
.rossa-screen__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.rossa-screen__section {
  width: 100%;
  padding: 14px 0;
  border-bottom: 1px solid var(--rossa-hairline-soft);
}
.rossa-screen__section:last-child { border-bottom: 0; }
.rossa-screen__subtitle {
  margin: 0 0 12px;
  font-family: var(--rossa-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rossa-teal);
  text-align: left;
}
.rossa-screen__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 24px;
  width: 100%;
}
.rossa-screen__field { min-width: 0; }
.rossa-screen__label {
  display: block;
  font-family: var(--rossa-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--rossa-muted);
  margin-bottom: 4px;
}
.rossa-screen__value {
  font-family: var(--rossa-font);
  font-size: 14px;
  color: var(--rossa-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rossa-screen__row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  margin: 8px 0;
}

/*=============================================================================
  27. VER RESERVA — COLLAPSIBLE CARDS (accordion, pairs with js/rossa/ver_reserva.js)
  ---------------------------------------------------------------------------
  Original block markup, untouched: the JS injects a .rossa-screen__head bar
  into each #bloque-* card and toggles is-collapsed on its .rossa-ctr-block.
  Cards stack single-column (gestor_usuarios style), bodies fold away.
=============================================================================*/
body.rossa-collapse-on .rossa-ctr-booking { display: block; margin-top: 14px; }
body.rossa-collapse-on .rossa-ctr-booking__column { display: block; width: 100% !important; }
body.rossa-collapse-on .rossa-ctr-booking__content { display: block; width: 100%; }
body.rossa-collapse-on .rossa-ctr-block {
  display: block;
  width: 100%;
  max-width: 920px;
  margin: 0 auto 12px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: 10px;
  padding: 4px 18px 14px;
  box-shadow: none;
}
body.rossa-collapse-on .rossa-ctr { width: 100% !important; }
/* injected head replaces the card's own big h1 + floating circle icon */
body.rossa-collapse-on .rossa-ctr > h1 { display: none; }
body.rossa-collapse-on .rossa-ctr-block > div[class*="rossa-ctr__icon"] { display: none; }
/* the per-block jump buttons are pointless against folded cards */
body.rossa-collapse-on .rossa-ctr__buttons { display: none !important; }

/* the injected head is the click bar */
body.rossa-collapse-on .rossa-screen__head {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  border-bottom: 0;
  margin-bottom: 0;
  padding: 12px 0;
}
body.rossa-collapse-on .rossa-collapse:not(.is-collapsed) .rossa-screen__head {
  border-bottom: 1px solid var(--rossa-border);
  margin-bottom: 14px;
}
body.rossa-collapse-on .rossa-screen__head:hover .rossa-screen__heading { color: var(--rossa-teal); }
.rossa-collapse__chev {
  margin-left: auto;
  color: var(--rossa-muted);
  font-size: 13px;
  transition: transform .15s ease;
}
.rossa-collapse.is-collapsed .rossa-collapse__chev { transform: rotate(-90deg); }

/* folded: everything after the head disappears */
.rossa-collapse.is-collapsed .rossa-screen__head ~ * { display: none !important; }
body.rossa-collapse-on .rossa-collapse.is-collapsed { padding-bottom: 4px; }

/* 2-up grid: JS reparents the six wrappers into this container.
   Expanded cards span the full row; single column on narrow screens. */
body.rossa-collapse-on .rossa-collapse-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
  max-width: 1200px;
  margin: 14px auto;
}
body.rossa-collapse-on .rossa-collapse-grid .rossa-ctr-block {
  margin: 0;
  max-width: none;
}
body.rossa-collapse-on .rossa-collapse-grid .rossa-collapse:not(.is-collapsed) { grid-column: 1 / -1; }
@media (max-width: 900px){
  body.rossa-collapse-on .rossa-collapse-grid { grid-template-columns: 1fr; }
}
/* the emptied legacy column containers */
body.rossa-collapse-on .rossa-ctr-booking { display: none; }

/*=============================================================================
  28. VER RESERVA — desplegables estilo gestor_usuarios
  ---------------------------------------------------------------------------
  Los bloques originales se ENVUELVEN (vía js/rossa/ver_reserva.js) en el
  patrón rossa-scope-* de edit_user.php, cuyos estilos ya viven en este
  archivo — aquí solo la lista contenedora y la neutralización del look de
  tarjeta dentro de los children. Activo solo bajo body.rossa-scopes-on.
=============================================================================*/
body.rossa-scopes-on .rossa-scope-list {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* dos por fila: izquierda / derecha */
  align-items: start;
  gap: 14px;
  width: 100%;
  max-width: none;                  /* usa TODO el ancho disponible, sin bordes */
  margin: 16px 0;
}
/* abierta o cerrada, cada tarjeta se queda en su columna (izq/dcha);
   las filas se alinean arriba para que una abierta no estire a su pareja */
@media (max-width: 900px){
  body.rossa-scopes-on .rossa-scope-list { grid-template-columns: 1fr; }
}
body.rossa-scopes-on .rossa-ctr-booking { display: none; }   /* vaciados por el JS */
body.rossa-scopes-on .rossa-scope-children .rossa-ctr-block {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 4px 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.rossa-scopes-on .rossa-scope-children .rossa-ctr { width: 100% !important; }
/* la cabecera del grupo ya nombra el bloque: fuera h1 e iconos flotantes */
body.rossa-scopes-on .rossa-scope-children .rossa-ctr > h1 { display: none; }
body.rossa-scopes-on .rossa-scope-children .rossa-ctr-block > div[class*="rossa-ctr__icon"] { display: none; }
body.rossa-scopes-on .rossa-scope-children .rossa-ctr__buttons { display: none !important; }
body.rossa-scopes-on .rossa-scope-name i { color: var(--rossa-teal); margin-right: 8px; }
/* sin checkbox/meta en ver_reserva: empuja el chevron al borde derecho como en edit_user */
body.rossa-scopes-on .rossa-scope-name { margin-right: auto; font-size: 15px; }
body.rossa-scopes-on .rossa-scope-head { padding: 12px 16px; }

/* --- CONTENIDO INTERNO: a ancho completo y CENTRADO en cada caja ---------
   Los bloques .rossa-ctr* se diseñaron para una tarjeta de 520px; aquí cada
   caja puede ser ancha, así que neutralizamos los anchos fijos / 80% / auto y
   centramos. (Antes esto vivía bajo .rossa-tabs-on y quedó inerte.) */
body.rossa-scopes-on .rossa-scope-children .rossa-ctr { align-items: center; }
body.rossa-scopes-on .rossa-scope-children .rossa-ctr__main-content {
  width: 100%;
}
body.rossa-scopes-on .rossa-scope-children .rossa-ctr__row,
body.rossa-scopes-on .rossa-scope-children .rossa-ctr__commentary,
body.rossa-scopes-on .rossa-scope-children .rossa-ctr__client-buttons {
  width: 100%;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
body.rossa-scopes-on .rossa-scope-children .rossa-box__dates {
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
body.rossa-scopes-on .rossa-scope-children .rossa-ctr__data-client { justify-content: center; text-align: center; }
body.rossa-scopes-on .rossa-scope-children .rossa-ctr__huespedes,
body.rossa-scopes-on .rossa-scope-children .rossa-ctr__data-huesped { justify-content: center; }

/* Grupos de botones (Marcar como, Comunicaciones, Huéspedes, IVA, Factura…):
   de rejillas/columnas fijas -> fila flex centrada que envuelve */
body.rossa-scopes-on .rossa-scope-children .rossa-ctr__btn-comunicaciones,
body.rossa-scopes-on .rossa-scope-children .rossa-ctr__btn-huespedes,
body.rossa-scopes-on .rossa-scope-children .rossa-ctr__btn-status,
body.rossa-scopes-on .rossa-scope-children .rossa-ctr__btn-card,
body.rossa-scopes-on .rossa-scope-children .rossa-ctr__btn-iva,
body.rossa-scopes-on .rossa-scope-children .rossa-ctr__btn-bill,
body.rossa-scopes-on .rossa-scope-children .rossa-ctr__btn-tipo-facturacion {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  width: auto !important;
  grid-template-columns: none !important;
}
/* Botones compactos como en el resto de la app (no losas) */
body.rossa-scopes-on .rossa-scope-children .rossa-ctr .rossa-btn--reserva,
body.rossa-scopes-on .rossa-scope-children .rossa-ctr .rossa-btn--default,
body.rossa-scopes-on .rossa-scope-children .rossa-ctr .rossa-btn--negative {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  text-align: center !important;
  padding: 9px 16px !important;
}
/* Inputs/textarea a un ancho de pantalla, no de tarjeta estrecha */
body.rossa-scopes-on .rossa-scope-children .rossa-ctr input[type="text"],
body.rossa-scopes-on .rossa-scope-children .rossa-ctr input[type="email"],
body.rossa-scopes-on .rossa-scope-children .rossa-ctr input[type="tel"] { width: min(360px, 100%); height: 38px; box-sizing: border-box; }
body.rossa-scopes-on .rossa-scope-children .rossa-ctr textarea { width: min(520px, 100%); min-height: 84px; box-sizing: border-box; }
/* Resumen: el grid usaba auto-fill (deja huecos a la derecha y apelotona a la
   izquierda) -> 4 columnas iguales, acotado y CENTRADO. Fila cliente centrada. */
body.rossa-scopes-on #bloque-cliente .rossa-box__dates {
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
body.rossa-scopes-on #bloque-cliente .rossa-ctr__data-client {
  justify-content: center;
  text-align: center;
}

/*=============================================================================
  27. PAGE HELP ICON — each module's subtitle/description now lives in a "?"
  badge next to the <h1> title (relocated from the old intro <p>). Reuses the
  global .tippy mechanism (footer.php moves title -> data-title so the OS
  tooltip doesn't double the tippy popup). Markup:
      <h1>Título <span class="tippy rossa-help" title="…descripción…">?</span></h1>
=============================================================================*/
/* Scoped to the <span> badge: the <p class="rossa-help"> help texts inside
   forms (edit_user) must keep the plain text style defined far above, so this
   badge styling must NOT leak onto them. */
span.rossa-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 10px;
  padding: 0;
  border-radius: var(--rossa-radius-pill);
  border: 1px solid var(--rossa-border);
  background: var(--rossa-white);
  color: var(--rossa-muted);
  font-family: var(--rossa-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
  user-select: none;
  transition: color .15s ease, border-color .15s ease;
}
span.rossa-help:hover { border-color: var(--rossa-teal); color: var(--rossa-teal); }

/*=============================================================================
  29. SCREEN: LOGIN  (body.lologin — login / forgot_password / reset_password)
  Split-screen layout (user mockup, on Rossa palette): LEFT = full-height teal
  brand panel (.rossa-login-aside) with the white-rendered ROSSA logo top-left,
  a big white tagline centered, version pinned bottom-left; RIGHT =
  (.rossa-login-main) a vertically-centered ~420px column — "Iniciar sesión"
  heading + muted subtitle, label-over-input fields (soft grey fill, rounded,
  teal focus ring), full-width teal "Acceder" button, and the credit footer
  pinned to the bottom. rossa.css is linked LAST in the three standalone
  <head>s, so §10's fixed 260px sidebar #footer is re-overridden here.
=============================================================================*/
body.lologin {
  display: flex;               /* two columns: brand panel | form */
  flex-direction: row;
  align-items: stretch;
  min-height: 100vh;
  margin: 0;
  background: var(--rossa-white);   /* cancels lydia's textura.jpg tile */
  font-family: var(--rossa-font);
}

/* ── LEFT: teal brand panel ─────────────────────────────────────────────── */
body.lologin .rossa-login-aside {
  position: relative;
  flex: 0 0 45%;
  max-width: 45%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;     /* tagline sits vertically centered */
  padding: 56px 64px;
  background: var(--rossa-red);   /* brand pink of the ROSSA logo */
  overflow: hidden;
}
/* The red ROSSA wordmark rendered solid white on the pink field */
body.lologin .rossa-login-aside-logo {
  position: absolute;
  top: 48px;
  left: 64px;
  width: 150px;
  height: auto;
  filter: brightness(0) invert(1);
}
body.lologin .rossa-login-aside-title {
  max-width: 12ch;
  margin: 0;
  color: var(--rossa-white);
  font-family: var(--rossa-font);
  font-size: clamp(32px, 3.4vw, 52px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.01em;
}

/* ── RIGHT: form column ─────────────────────────────────────────────────── */
body.lologin .rossa-login-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--rossa-white);
}

/* The old white card with drop shadow dissolves into the flat column */
body.lologin #registro {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;     /* vertically centered form block */
  align-items: center;         /* centers the 420px column horizontally */
  box-sizing: border-box;
  width: auto;
  margin: 0;
  padding: 48px clamp(24px, 6vw, 96px);
  background: var(--rossa-white);
  box-shadow: none;
  border: 0;
  text-align: left;
}
/* Every direct block shares the same 420px column, left-aligned */
body.lologin #registro > * {
  width: 100%;
  max-width: 420px;
}

/* Heading block (mockup: "Iniciar sesión" + muted subtitle) */
body.lologin .rossa-login-head { margin-bottom: 28px; }
body.lologin .rossa-login-title {
  margin: 0 0 6px;
  color: var(--rossa-ink);
  font-family: var(--rossa-font);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.1;
}
body.lologin .rossa-login-sub {
  margin: 0;
  color: var(--rossa-muted);
  font-family: var(--rossa-font);
  font-size: 15px;
  font-weight: 400;
}

/* Feedback lines: bare bold text, no bordered box */
body.lologin p.error,
body.lologin p.ok {
  box-sizing: border-box;
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 0 !important;   /* lydia: `.error{border:#C00 2px solid !important}` */
  border-radius: var(--rossa-radius);
  background: transparent;
  font-family: var(--rossa-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
}
body.lologin p.error { color: var(--rossa-red); background: var(--rossa-salmon); }
body.lologin p.ok,
body.lologin p.ok.login-msg-ok {
  color: var(--rossa-green-fig);
  background: var(--rossa-strip);
  font-size: 14px;
}

/* Form wrapper + fieldset: drop lydia's fixed height/border/padding */
body.lologin #formy { width: 100%; }
body.lologin #field_reg {
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--rossa-ink);
}
/* legacy <br/> spacers — the .campos margins below replace them */
body.lologin #field_reg br { display: none; }

/* Field block: full-width label-over-input */
body.lologin .campos {
  width: 100%;
  margin: 0 0 18px;
}
body.lologin .campos label {
  display: block;
  width: auto;
  padding: 0 0 8px;
  color: var(--rossa-ink);
  font-family: var(--rossa-font);
  font-size: 14px;
  font-weight: 600;
}
body.lologin .campos input {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  padding: 11px 14px;
  background-color: var(--rossa-surface-2);   /* soft grey fill (mockup) */
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  color: var(--rossa-ink);
  font-family: var(--rossa-font);
  font-size: 15px;
  font-weight: 400;
}
body.lologin .campos input::placeholder { color: var(--rossa-muted); }
body.lologin .campos input:focus {
  outline: none;
  background-color: var(--rossa-white);
  border-color: var(--rossa-red);
  box-shadow: 0 0 0 3px rgba(231, 0, 76, .14);
}
body.lologin .campos input.error { border-color: var(--rossa-red); }

/* Button row: full-width teal CTA (mockup) */
body.lologin #field_reg > div:not(.campos) {
  width: 100%;
  margin: 4px 0 0;
  text-align: left;
}
/* beats lydia's `#field_reg .admin_boton` (red, 220px) AND rossa §3 teal */
body.lologin #field_reg .admin_boton {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 12px 16px;
  background-color: var(--rossa-red);
  border: 0;
  border-radius: var(--rossa-radius);
  color: var(--rossa-white);
  font-family: var(--rossa-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .15s ease;
}
body.lologin #field_reg .admin_boton:hover,
body.lologin #field_reg .admin_boton:active {
  background-color: var(--rossa-red-dark);
}

/* Secondary links (¿Has olvidado tu contraseña? / Volver al login) */
body.lologin .login-link-container {
  margin: 16px 0 0;
  text-align: left;
}
body.lologin .login-link {
  color: var(--rossa-red);
  font-family: var(--rossa-font);
  font-size: 13px;
}
body.lologin .login-link:hover { color: var(--rossa-red-dark); }

/* Footer: small muted credit, right-aligned at the bottom of the form column */
body.lologin #creditoslog {
  margin-top: auto;            /* hugs the bottom of .rossa-login-main */
  padding: 16px clamp(24px, 6vw, 96px);
  font-weight: 400;
  text-shadow: none;
}
body.lologin #creditoslog #footer {
  position: static;
  float: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;   /* mockup: footer credits bottom-right */
  gap: 10px;
  border-top: 0;
  background: transparent;
  font-size: 13px !important;  /* beats lydia's 14px !important */
  font-weight: 400;
  text-transform: none;
  text-shadow: none;
  color: var(--rossa-muted);
}
body.lologin #creditoslog #footer a { color: var(--rossa-muted); }
body.lologin #creditoslog #footer #footer-logo img { height: 20px; }

/* ── Responsive ─────────────────────────────────────────────────────────
   Tablet/landscape (861–1024): keep the two columns but ease the squeeze. */
@media (max-width: 1024px) and (min-width: 861px) {
  body.lologin .rossa-login-aside { flex-basis: 42%; max-width: 42%; padding: 48px 44px; }
  body.lologin #registro { padding: 40px clamp(24px, 5vw, 64px); }
}

/* Stacked: the brand panel becomes a compact banner above the form so the
   form is immediately visible (the big decorative hero would otherwise push
   the inputs below the fold on phones). Per the mobile mockup the banner
   keeps its left-aligned logo + tagline lockup (just scaled down), the
   heading block centers, and the credit footer sits under a hairline rule. */
@media (max-width: 860px) {
  body.lologin { flex-direction: column; min-height: 100vh; }
  body.lologin .rossa-login-aside {
    flex: 0 0 auto;
    max-width: none;
    justify-content: flex-start;
    align-items: flex-start;      /* logo + tagline flush left (mockup) */
    gap: 8px;
    padding: 18px 26px 22px;
  }
  /* Logo_200x200.png is a square canvas with the wordmark in a centered band:
     rendered at `contain` it drags ~90px of transparency and pushes the tagline
     away. `cover` on a band-height box crops that padding off, top and bottom. */
  body.lologin .rossa-login-aside-logo {
    position: static;
    margin: 0;
    width: 126px;
    height: 34px;
    object-fit: cover;
    object-position: center;
  }
  body.lologin .rossa-login-aside-title {
    max-width: 22ch;
    font-size: 19px;
    line-height: 1.22;
    letter-spacing: 0;
  }
  body.lologin .rossa-login-main { flex: 1 1 auto; }
  body.lologin #registro { justify-content: flex-start; align-items: center; padding: 44px 28px 32px; }
  body.lologin .rossa-login-head { text-align: center; }  /* mockup: heading centered */
  body.lologin #creditoslog { padding: 16px 28px 20px; }
  body.lologin #creditoslog #footer {
    justify-content: center;
    padding-top: 18px;
    border-top: 1px solid var(--rossa-border);
    text-align: center;
  }
}

/* Phones: collapse the hero further; tighten the form spacing. */
@media (max-width: 560px) {
  body.lologin .rossa-login-aside { gap: 7px; padding: 16px 22px 20px; }
  body.lologin .rossa-login-aside-logo { width: 112px; height: 30px; }
  body.lologin .rossa-login-aside-title { font-size: 17px; }
  body.lologin #registro { justify-content: flex-start; padding: 36px 22px 32px; }
  body.lologin .rossa-login-head { margin-bottom: 22px; }
  body.lologin .rossa-login-title { font-size: 26px; }
  body.lologin .campos { margin-bottom: 14px; }
}
/*
  28. SCREEN: Página de Reserva  (module=web_content)
  ---------------------------------------------------------------------------
  Pantalla única con tabs que reúne preguntas_frecuentes, help_videos y
  help_page reutilizando sus content originales.
=============================================================================*/
/* Barra de tabs: línea inferior continua + el subrayado activo cae sobre ella */
#tabs_pagreserva {
  border-bottom: 2px solid var(--rossa-border);
  margin-bottom: 18px;
  padding-bottom: 0;
  gap: 0;
}
#tabs_pagreserva .pest { margin-bottom: -2px; }
/* Panel plano: sin el borde gris legacy de .cont (common.css) */
.rossa-webcontent { padding: 0; }
.rossa-webcontent .cont { border: 0; }
.rossa-webcontent > .cont > h1:first-child { margin-top: 0; }
/* Oculta el "Volver" al selector de ayudas (no aplica en el panel unificado) */
.rossa-webcontent a[href*="module=help_selector"] { display: none !important; }

/* ---- Listados como TARJETAS */
.rossa-wc-list { margin-top: 8px; }
.rossa-wc-card {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-left: 4px solid var(--rossa-green-fig);   /* acento teal-verde = .crule.on (--cpl) */
  border-radius: var(--rossa-radius);
  margin-bottom: 8px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.rossa-wc-card:hover { box-shadow: 0 2px 10px rgba(32, 92, 104, .10); }
.rossa-wc-card--off { border-left-color: var(--rossa-border); opacity: .6; }
.rossa-wc-card--off:hover { opacity: .85; }
.rossa-wc-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  flex-wrap: wrap;
}
.rossa-wc-card__dot { font-size: 9px; line-height: 1; color: var(--rossa-green-fig); }
.rossa-wc-card--off .rossa-wc-card__dot { color: var(--rossa-muted); }
.rossa-wc-card__name { font-size: 14px; font-weight: 700; color: var(--rossa-ink); }
.rossa-wc-card__pill {
  font-size: 10px;
  font-weight: 700;
  color: var(--rossa-muted);
  background: var(--rossa-strip);
  padding: 2px 8px;
  border-radius: var(--rossa-radius-pill);
  letter-spacing: .02em;
}
.rossa-wc-card__meta { font-size: 12px; color: var(--rossa-muted); font-style: italic; }
.rossa-wc-card__actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
/* alinea verticalmente los iconos-acción legacy dentro de la tarjeta */
.rossa-wc-card__actions a { display: inline-flex; align-items: center; }
.rossa-wc-card__actions a img { vertical-align: middle; }
/* "Ver" / botón primario dentro de la tarjeta: sin el margin centrado de §18 */
.rossa-wc-card__actions .admin_boton { margin: 0 !important; display: inline-flex; }
/* Badges de tipo (Creado por el sistema / Enlace / Texto) — paleta comunicaciones */
.rossa-wc-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--rossa-radius-pill);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.rossa-wc-tag--sys  { background: #dde8eb; color: var(--rossa-navy); }   /* creado por el sistema */
.rossa-wc-tag--link { background: #d0f0ed; color: var(--rossa-petrol); } /* enlace */
.rossa-wc-tag--text { background: #fef9c3; color: #7a5c00; }             /* texto */
/* "N sub-botones": señal de que el botón principal tiene hijos desplegables */
.rossa-wc-tag--subs {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  color: var(--rossa-cyan);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.rossa-wc-tag--subs i { font-size: 11px; }

/* ---- Sub-botones desplegables dentro de la tarjeta del botón de ayuda ----
   Antes solo se podía llegar a ellos por un drill-down (manage_sub_buttons) y desde
   la lista no había forma de saber qué botón tenía hijos. Ahora la tarjeta lleva su
   propio <details>: nativo, sin JS, y las acciones de cada hijo (activar, editar,
   servicios) están ahí mismo. */
.rossa-wc-subs { border-top: 1px solid var(--rossa-border); }
.rossa-wc-subs > .rossa-wc-subs__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--rossa-muted);
}
.rossa-wc-subs > .rossa-wc-subs__head::-webkit-details-marker { display: none; }
.rossa-wc-subs > .rossa-wc-subs__head::marker { content: ""; }
.rossa-wc-subs > .rossa-wc-subs__head:hover { color: var(--rossa-teal); }
.rossa-wc-subs__chevron { font-size: 11px; transition: transform .15s ease; }
.rossa-wc-subs[open] > .rossa-wc-subs__head .rossa-wc-subs__chevron { transform: rotate(180deg); }
.rossa-wc-subs__list { padding: 0 16px 10px 28px; }
.rossa-wc-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-top: 1px solid var(--rossa-hairline-soft);
}
.rossa-wc-sub--off { opacity: .6; }
.rossa-wc-sub--off .rossa-wc-card__dot { color: var(--rossa-muted); }
.rossa-wc-sub__name { font-size: 13px; font-weight: 600; color: var(--rossa-ink); }
.rossa-wc-subs__foot { padding-top: 8px; font-size: 12px; }
.rossa-wc-subs__foot a { color: var(--rossa-cyan-fig); text-decoration: none; }
.rossa-wc-subs__foot a:hover { text-decoration: underline; }

/* Sub-fila de la tarjeta (p.ej. la respuesta bajo la pregunta) — espejo de la
   fila secundaria de las tarjetas de Reglas de envío (.crule-hr + .crule-pipe). */
.rossa-wc-card__hr { height: 1px; background: var(--rossa-border); margin: 0 16px; opacity: .7; }
.rossa-wc-card__sub {
  padding: 9px 16px 11px;
  font-size: 13px;
  color: var(--rossa-muted);
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
  line-height: 1.5;
}
.rossa-wc-card__sub-label {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--rossa-muted);
}
.rossa-wc-card__sub p { margin: 0; }
/* las tablas de drill-down (preguntas/vídeos de una fase) se renderizan como
   tarjetas .rossa-wc-card, igual que los listados — no hay tablas en el panel */

/* ── Tab "Previsualizar" (.rossa-pv) ─────────────────────────────────────────
   Enseña la página real del huésped (pageBookingClients/demo.php) dentro de un
   iframe, con selectores de alojamiento/origen/idioma y una barra de fases.
   Las fases siguen la convención de tabs del proyecto: texto plano, inactiva
   en --rossa-muted, activa en --rossa-teal con subrayado de 2px. */
.rossa-pv { margin-top: 4px; }
.rossa-pv__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--rossa-border);
}
.rossa-pv__field { display: flex; flex-direction: column; gap: 5px; min-width: 12rem; }
.rossa-pv__field--narrow { min-width: 8rem; }
.rossa-pv__field--grow { margin-left: auto; min-width: 0; }
.rossa-pv__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--rossa-muted);
}
.rossa-pv__field select { width: 100%; }
.rossa-pv__actions { display: flex; gap: 8px; }
.rossa-pv__actions .admin_boton { margin: 0; }

/* Conmutador Móvil / Ordenador */
.rossa-pv__seg {
  display: inline-flex;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  overflow: hidden;
  background: #fff;
}
.rossa-pv__segbtn {
  appearance: none;
  border: 0;
  background: #fff;
  color: var(--rossa-muted);
  font: 600 12px/1 var(--rossa-font);
  padding: 9px 12px;
  cursor: pointer;
}
.rossa-pv__segbtn + .rossa-pv__segbtn { border-left: 1px solid var(--rossa-border); }
.rossa-pv__segbtn.is-on { background: var(--rossa-teal); color: #fff; }

/* Barra de fases */
.rossa-pv__phases {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  padding: 10px 0 0;
}
.rossa-pv__phase {
  appearance: none;
  border: 0;
  background: none;
  border-bottom: 2px solid transparent;
  color: var(--rossa-muted);
  font: 600 13px/1 var(--rossa-font);
  padding: 10px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.rossa-pv__phase:hover { color: var(--rossa-ink); }
.rossa-pv__phase.is-on { color: var(--rossa-teal); border-bottom-color: var(--rossa-teal); }
.rossa-pv__nav {
  appearance: none;
  border: 1px solid var(--rossa-border);
  background: #fff;
  color: var(--rossa-teal);
  border-radius: var(--rossa-radius);
  font-size: 12px;
  line-height: 1;
  padding: 8px 10px;
  cursor: pointer;
}
.rossa-pv__nav:hover { border-color: var(--rossa-teal); }

/* Escenario de la previsualización */
.rossa-pv__stage {
  margin-top: 14px;
  padding: 20px 12px;
  background: var(--rossa-surface);
  border-radius: 10px;
}
.rossa-pv__device {
  position: relative;               /* ancla del indicador de carga */
  max-width: 420px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--rossa-border);
  border-radius: 10px;
  overflow: hidden;
}
.rossa-pv__device--ordenador { max-width: 100%; }
.rossa-pv__device iframe {
  display: block;
  width: 100%;
  height: 760px;
  border: 0;
  transition: opacity .2s ease;
}

/* Feedback al cambiar de fase: el iframe se recarga entero, así que sin aviso
   parece que no ha pasado nada. Se atenúa el contenido anterior y se muestra
   qué se está cargando; el resumen de debajo dice en qué fase estamos. */
.rossa-pv__status {
  margin: 8px 2px 0;
  min-height: 1.2em;
  font-size: 12px;
  color: var(--rossa-muted);
}
.rossa-pv__device.is-loading iframe { opacity: .18; }
.rossa-pv__loading {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, .72);
}
.rossa-pv__device.is-loading .rossa-pv__loading { display: flex; }
.rossa-pv__spinner {
  width: 26px;
  height: 26px;
  border: 2px solid var(--rossa-border);
  border-top-color: var(--rossa-teal);
  border-radius: 50%;
  animation: rossa-pv-spin .7s linear infinite;
}
.rossa-pv__loadingtxt {
  font-size: 12px;
  font-weight: 600;
  color: var(--rossa-teal);
}
@keyframes rossa-pv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .rossa-pv__spinner { animation-duration: 2.4s; }
  .rossa-pv__device iframe { transition: none; }
}
@media (max-width: 700px) {
  .rossa-pv__field--grow { margin-left: 0; }
  .rossa-pv__stage { padding: 12px 6px; }
  .rossa-pv__device iframe { height: 620px; }
}

/*=============================================================================
  29. SCREEN: Creación de preguntas frecuentes y de vídeos
      (module=add_pregunta_v2 / add_video_step_v2)
  ---------------------------------------------------------------------------
  Scope: #contenido_admin.rossa-wc-edit — clase puesta por los wrappers _v2;
  el ID mantiene la especificidad sobre lo legacy sin !important. Patrón
  común: estancias como rejilla de cards (.rossa-estcards, la card entera es
  el checkbox) + tabla de idiomas + botonera fija. Solo en preguntas existe
  además la tabla de CANALES (orden fijo: 1 = título · 2 = botonera marcar ·
  3 = checks), cuyo título va anclado a su form #create_pregunta_v2.
=============================================================================*/

/* Tablas planas y blancas (anula el striping/fondos de table.estandar) */
#contenido_admin.rossa-wc-edit table.estandar { border-spacing: 0; background: var(--rossa-white); margin-bottom: 22px; }
#contenido_admin.rossa-wc-edit table.estandar td {
  background: var(--rossa-white);
  border: 0;
  border-radius: 0;
  text-align: left;
  color: var(--rossa-ink);
  font-family: var(--rossa-font);
  padding: 6px 2px;
}

/* ── Canales: chips seleccionables (pill, tinte teal al marcar) ───────────── */
#contenido_admin.rossa-wc-edit .rossa-canales { margin: 4px 0 24px; }
#contenido_admin.rossa-wc-edit .rossa-canales__title,
#contenido_admin.rossa-wc-edit .rossa-estcards-head__title {
  display: block;
  color: var(--rossa-teal);
  font-family: var(--rossa-font);
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  border-bottom: 2px solid var(--rossa-teal);
  padding: 18px 2px 8px;
}
#contenido_admin.rossa-wc-edit .rossa-canales__hint { color: var(--rossa-muted); font-size: 12px; font-weight: 400; }
#contenido_admin.rossa-wc-edit .rossa-canales__bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
#contenido_admin.rossa-wc-edit .rossa-canales__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  max-height: 30vh;
  overflow-y: auto;
  padding-right: 4px;
}
#contenido_admin.rossa-wc-edit .rossa-canal-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  padding: 12px 14px;
  font-family: var(--rossa-font);
  font-size: 14px;
  color: var(--rossa-ink);
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
#contenido_admin.rossa-wc-edit .rossa-canal-card:hover { border-color: var(--rossa-teal); }
#contenido_admin.rossa-wc-edit .rossa-canal-card input {
  accent-color: var(--rossa-teal);
  width: 15px;
  height: 15px;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}
#contenido_admin.rossa-wc-edit .rossa-canal-card:has(input:checked) {
  background: var(--rossa-tint);
  border-color: var(--rossa-teal);
  color: var(--rossa-teal);
  font-weight: 600;
}

/* ── Cabecera de estancias: título + buscador + "Marcar Todos" ────────────── */
#contenido_admin.rossa-wc-edit .rossa-estcards-head { margin: 4px 0 14px; }
#contenido_admin.rossa-wc-edit .rossa-estcards-head__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
#contenido_admin.rossa-wc-edit .rossa-estcards-search {
  width: 250px;               /* = ancho base de una card de estancia (grid minmax 250px) */
  max-width: 100%;
  height: 38px;               /* mismo alto que el botón "Marcar Todos" */
  box-sizing: border-box;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  padding: 0 12px;
  font-size: 13px;
  font-family: var(--rossa-font);
  color: var(--rossa-ink);
}
#contenido_admin.rossa-wc-edit .rossa-estcards-search:focus {
  outline: none;
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .12);
}

/* Botoneras "Marcar..." (canales y estancias) */
#contenido_admin.rossa-wc-edit .rossa-canales__bar button,
#contenido_admin.rossa-wc-edit .rossa-estcards-head button {
  display: inline-flex;
  align-items: center;
  height: 38px;               /* mismo alto que el buscador */
  box-sizing: border-box;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  color: var(--rossa-ink);
  font-family: var(--rossa-font);
  font-size: 12px;
  font-weight: 600;
  padding: 0 14px;
  margin: 0;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
#contenido_admin.rossa-wc-edit .rossa-canales__bar button:hover,
#contenido_admin.rossa-wc-edit .rossa-estcards-head button:hover { background: var(--rossa-surface); border-color: #c7cfcf; }

/* ── Estancias: la card es el EDIFICIO (contenedor); dentro, estancias sueltas
   seleccionables individualmente (checkbox visible + tinte teal al marcar). ── */
#contenido_admin.rossa-wc-edit .rossa-estcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
  max-height: 55vh;
  overflow-y: auto;
  padding-right: 4px;
}
#contenido_admin.rossa-wc-edit .rossa-estcard {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  padding: 12px 14px;
  transition: background .15s ease, border-color .15s ease;
}
/* Card de edificio con alguna estancia seleccionada: fondo muy clarito + borde
   teal, para ver de un vistazo qué edificios tienen estancias marcadas. */
#contenido_admin.rossa-wc-edit .rossa-estcard:has(input.estancia_check:checked) {
  background: var(--rossa-tint);
  border-color: var(--rossa-teal);
}
#contenido_admin.rossa-wc-edit .rossa-estcard__name {
  font-family: var(--rossa-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rossa-ink);
  border-bottom: 1px solid var(--rossa-border);
  padding-bottom: 7px;
  margin-bottom: 9px;
}
#contenido_admin.rossa-wc-edit .rossa-estcard__rooms { display: flex; flex-direction: column; gap: 3px; }
#contenido_admin.rossa-wc-edit .rossa-estcard__room {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rossa-font);
  font-size: 14px;
  color: var(--rossa-ink);
  line-height: 1.4;
  padding: 5px 7px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
#contenido_admin.rossa-wc-edit .rossa-estcard__room:hover { background: var(--rossa-strip); }
#contenido_admin.rossa-wc-edit .rossa-estcard__room:has(input:checked) {
  background: rgba(32, 92, 104, .10);   /* algo más visible que el fondo de la card */
  color: var(--rossa-teal);
  font-weight: 600;
}
#contenido_admin.rossa-wc-edit .rossa-estcard__room input.estancia_check {
  accent-color: var(--rossa-teal);
  width: 15px;
  height: 15px;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

#contenido_admin.rossa-wc-edit #create_pregunta_v2 .rossa-estcard__rooms, #contenido_admin.rossa-wc-edit #create_video_v2 .rossa-estcard__rooms {
  --rossa-estcard-room-height: 34px;
  --rossa-estcard-visible-rooms: 5;
  --rossa-estcard-expanded-rooms: 10;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: calc((var(--rossa-estcard-room-height) * var(--rossa-estcard-visible-rooms)) + (3px * (var(--rossa-estcard-visible-rooms) - 1)));
  overflow: hidden;
  padding-right: 4px;
}
#contenido_admin.rossa-wc-edit #create_pregunta_v2 .rossa-estcard.is-expanded .rossa-estcard__rooms, #contenido_admin.rossa-wc-edit #create_video_v2 .rossa-estcard.is-expanded .rossa-estcard__rooms {
  max-height: calc((var(--rossa-estcard-room-height) * var(--rossa-estcard-expanded-rooms)) + (3px * (var(--rossa-estcard-expanded-rooms) - 1)));
  overflow-y: auto;
}
#contenido_admin.rossa-wc-edit #create_pregunta_v2 .rossa-estcard__room, #contenido_admin.rossa-wc-edit #create_video_v2 .rossa-estcard__room {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 6px;
  border-radius: 6px;
}
#contenido_admin.rossa-wc-edit #create_pregunta_v2 .rossa-estcard__room:hover, #contenido_admin.rossa-wc-edit #create_video_v2 .rossa-estcard__room:hover {
  background: var(--rossa-strip);
}
#contenido_admin.rossa-wc-edit #create_pregunta_v2 .rossa-estcard__toggle, #contenido_admin.rossa-wc-edit #create_video_v2 .rossa-estcard__toggle {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--rossa-teal);
  font-family: var(--rossa-font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0 0;
  text-decoration: underline;
  box-shadow: none;
}
#contenido_admin.rossa-wc-edit #create_pregunta_v2 .rossa-estcard__toggle:hover, #contenido_admin.rossa-wc-edit #create_video_v2 .rossa-estcard__toggle:hover {
  color: var(--rossa-green);
  background: none;
  border: none;
}
#contenido_admin.rossa-wc-edit #create_pregunta_v2 .rossa-estcard__toggle[hidden], #contenido_admin.rossa-wc-edit #create_video_v2 .rossa-estcard__toggle[hidden] {
  display: none;
}

/* ── Bloques de idioma: banner teal a todo el ancho (separador notorio) ────── */
#contenido_admin.rossa-wc-edit table.estandar td { vertical-align: top; padding: 8px 10px 8px 2px; }
#contenido_admin.rossa-wc-edit table.estandar td[width="15%"] {
  color: var(--rossa-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding-top: 14px;
}
/* El <td> solo aporta la SEPARACIÓN superior (transparente) entre el editor del
   idioma anterior y el banner del siguiente — igual para todos los idiomas. */
#contenido_admin.rossa-wc-edit table.estandar tr.rossa-lang-row > td {
  padding: 30px 0 0;
  background: transparent;
  vertical-align: top;
}
/* El banner es una caja teal IDÉNTICA para todos los idiomas. */
#contenido_admin.rossa-wc-edit .rossa-lang-banner {
  background: var(--rossa-tint);
  color: var(--rossa-teal);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: none;
  padding: 13px 16px;
  border-radius: var(--rossa-radius);
  border-left: 4px solid var(--rossa-teal);
}

/* Campo de texto (p.ej. URL del vídeo): input limpio del tema.
   Se excluye el buscador de estancias, que tiene su propio ancho/alto. */
#contenido_admin.rossa-wc-edit input[type="text"]:not(.rossa-estcards-search) {
  width: 100%;
  max-width: 520px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  padding: 9px 12px;
  font-size: 14px;
  font-family: var(--rossa-font);
  color: var(--rossa-ink);
  box-sizing: border-box;
  height: auto;
}
#contenido_admin.rossa-wc-edit input[type="text"]:not(.rossa-estcards-search):focus {
  outline: none;
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .12);
}

/* Botonera fija al fondo */
#contenido_admin.rossa-wc-edit table.estandar td[colspan="2"]:has(input.admin_boton) {
  position: fixed;
  left: 260px;                    /* = ancho de #menu; deja libre el footer */
  right: 0;
  bottom: 0;
  z-index: 981;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 14px 20px;
  background: var(--rossa-surface-2);
  border-top: 1px solid var(--rossa-border);
  box-shadow: 0 -2px 10px rgba(20, 40, 60, .07);
  box-sizing: border-box;
  transition: left .7s ease;      /* acompaña el plegado del menú */
}
body.showhidemenu #contenido_admin.rossa-wc-edit table.estandar td[colspan="2"]:has(input.admin_boton) { left: 60px; }
@media (max-width: 700px) {
  #contenido_admin.rossa-wc-edit table.estandar td[colspan="2"]:has(input.admin_boton) { left: 0; }
  body.showhidemenu #contenido_admin.rossa-wc-edit table.estandar td[colspan="2"]:has(input.admin_boton) { left: 35px; }
}
/* La barra queda fuera del flujo: reservar hueco para que no tape el final */
#contenido_admin.rossa-wc-edit { padding-bottom: 84px; }

/* Mismo padding en ambos botones (input y <a> heredan paddings distintos del
   legacy y salían con alturas diferentes) */
#contenido_admin.rossa-wc-edit td[colspan="2"] .admin_boton {
  margin: 0;
  min-width: 110px;
  padding: 9px 16px;
  box-sizing: border-box;
}
#contenido_admin.rossa-wc-edit a.admin_boton {
  background: var(--rossa-white);
  border-color: var(--rossa-border);
  color: var(--rossa-ink);
}
#contenido_admin.rossa-wc-edit a.admin_boton:hover { background: var(--rossa-surface); color: var(--rossa-ink); }
/* Tipo seleccionado (Texto/Enlace) en el paso "Seleccionar tipo": teal lleno */
#contenido_admin.rossa-wc-edit a.admin_boton.rossa-tipo-active,
#contenido_admin.rossa-wc-edit a.admin_boton.rossa-tipo-active:hover {
  background: var(--rossa-teal);
  border-color: var(--rossa-teal);
  color: var(--rossa-white);
}

/* --- Creación de ayudas (add_help_step_v2): selector de estancia ---------- */
#contenido_admin.rossa-wc-edit .rossa-helpsel__buttons { display: none; }

/* Acción destructiva con la forma de botón estándar (salmon + coral) */
#contenido_admin.rossa-wc-edit .button_load_content.eliminar_contenido,
#contenido_admin.rossa-wc-edit .button_load_content.eliminar_contenido:hover {
  background: var(--rossa-salmon);
  border: 1px solid var(--rossa-salmon);
  border-radius: var(--rossa-radius);
  color: var(--rossa-coral);
  font-family: var(--rossa-font);
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  padding: 8px 14px;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
}

/* Fila de control: label + desplegable + estado + eliminar */
#contenido_admin.rossa-wc-edit .rossa-helpsel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}
#contenido_admin.rossa-wc-edit .rossa-helpsel__label {
  font-family: var(--rossa-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rossa-muted);
  min-width: 80px;
}
#contenido_admin.rossa-wc-edit .rossa-helpsel .select2 { min-width: 340px; }
/* Selector de icono (único select2 dentro de la tabla): no a todo el ancho.
   max-width vence al width:100% inline que select2 hereda del <select>. */
#contenido_admin.rossa-wc-edit table.estandar .select2-container { max-width: 340px; }
/* Ayuda contextual del selector de estancia (aclara el flujo estancia↔contenido) */
#contenido_admin.rossa-wc-edit .rossa-helpsel__hint {
  margin: -6px 0 18px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--rossa-muted);
  max-width: 760px;
}
#contenido_admin.rossa-wc-edit .rossa-helpsel__hint strong { color: var(--rossa-ink); font-weight: 700; }
#contenido_admin.rossa-wc-edit .rossa-helpsel__hint-green { color: #0f8a6e; font-weight: 700; }

/* Cabeceras del formulario de la ayuda: el thead como título de sección y
   las de tbody (CONTENIDO / nombre de la estancia cargada) como sub-cabeceras */
#contenido_admin.rossa-wc-edit table.estandar thead tr.cab_help td {
  color: var(--rossa-teal);
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  text-align: left;
  border-bottom: 2px solid var(--rossa-teal);
  padding: 18px 2px 8px;
}
#contenido_admin.rossa-wc-edit table.estandar tbody tr.cab_help td {
  color: var(--rossa-teal);
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
  text-align: left;
  border-bottom: 2px solid var(--rossa-teal);
  padding: 24px 2px 10px;
}
#contenido_admin.rossa-wc-edit table.estandar td.cab {
  color: var(--rossa-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/*=============================================================================
  30. SELECT2 (re-skin global, v4.1)
  ---------------------------------------------------------------------------
  Mismos valores que los inputs/selects del tema (§4: borde --rossa-border,
  radius, blanco, focus ring teal). El dropdown se monta en <body>, por eso
  estas reglas no van scoped. Cosmético solamente.
=============================================================================*/
.select2-container--default .select2-selection--single {
  height: 36px;
  /* !important: ver_reserva.css fija border #bbb !important sobre este mismo selector */
  border: 1px solid var(--rossa-border) !important;
  border-radius: var(--rossa-radius);
  background-color: var(--rossa-white);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--rossa-ink);
  font-family: var(--rossa-font);
  font-size: 14px;
  line-height: 34px;
  padding-left: 12px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background-color: var(--rossa-muted);
  -webkit-mask-image: url("https://cdn.rossa.app/icons/chevron-down.svg");
          mask-image: url("https://cdn.rossa.app/icons/chevron-down.svg");
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
  transition: transform .15s ease;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border: 0;
  transform: rotate(180deg);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--rossa-teal) !important;
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .15);
}

/* Desplegable y buscador interno */
.select2-dropdown {
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  color: var(--rossa-ink);
  box-shadow: 0 6px 18px rgba(20, 40, 60, .10);
}
.select2-search--dropdown { padding: 8px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  padding: 6px 10px;
  outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .15);
}

/* Opciones y grupos */
.select2-results__option {
  font-size: 14px;
  padding: 7px 12px;
}
/* Cascada de fondos por orden (especificidades empatadas a propósito):
   seleccionada (tint) < verdes "con contenido"/Global < hover teal. */
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--rossa-tint);
  color: var(--rossa-ink);
}
/* Verde SOLO en la opción que tiene contenido. */
.select2-container--default .select2-results__option:has(> .rossa-opt-asignada) {
  background-color: rgba(25, 172, 138, .28);
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--rossa-teal);
  color: var(--rossa-white);
}
/* Iconos del dropdown (selector de icono de ayudas): en la opción resaltada
   (hover, fondo teal) el icono se vuelve blanco para que siga viéndose. */
.select2-container--default .select2-results__option--highlighted img {
  filter: brightness(0) invert(1);
}
.select2-results__group {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rossa-muted);
}

/*=============================================================================
  31. SCREEN: Gestión de servicios para botón de ayuda (module=help_step_services)
  ---------------------------------------------------------------------------
  Página suelta a la que se llega desde "Asignar Servicios" de un botón de
  ayuda. Scope: #contenido_admin.rossa-hss (clase puesta en help_step_services.php).
  Panel de info plano + lista de servicios como CARDS seleccionables (el <label>
  hace que toda la card marque el checkbox, sin JS; tinte teal al marcar).
=============================================================================*/
.rossa-hss .section-info {
  background: var(--rossa-white) !important;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  padding: 16px 18px !important;
  margin-bottom: 20px;
}
.rossa-hss .section-info h3 { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--rossa-deep); }
.rossa-hss .section-info p  { margin: 3px 0; font-size: 13px; color: var(--rossa-ink); }

.rossa-hss-section__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--rossa-teal);
  border-bottom: 1px solid var(--rossa-border);
  padding-bottom: 8px;
  margin: 22px 0 14px;
}
.rossa-hss-group { margin-bottom: 18px; }
.rossa-hss-group__title { font-size: 13px; font-weight: 700; color: var(--rossa-ink); margin-bottom: 10px; }
.rossa-svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.rossa-svc-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.rossa-svc-card:hover { border-color: var(--rossa-teal); }
.rossa-svc-card:has(input:checked) { border-color: var(--rossa-teal); background: rgba(0, 168, 134, .08); }
.rossa-svc-card input[type="checkbox"] { margin: 2px 0 0; flex-shrink: 0; }
.rossa-svc-card__body { display: flex; flex-direction: column; gap: 2px; }
.rossa-svc-card__name { font-size: 13px; font-weight: 700; color: var(--rossa-ink); }
.rossa-svc-card__desc { font-size: 12px; color: var(--rossa-muted); }
.rossa-hss-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rossa-border);
}

.rossa-hss-actions .admin_boton {
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  line-height: 1.25;
  box-sizing: border-box;
  vertical-align: middle;
}

/* Feedback alert box styles for Gestor de Pagos */
.rossa-feedback {
  padding: 12px 16px;
  border-radius: var(--rossa-radius);
  margin-top: 15px;
  margin-bottom: 25px;
  font-family: var(--rossa-font);
  font-size: 13px;
  font-weight: 500;
}
.rossa-feedback--success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.rossa-feedback--error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Specific overrides for compact confirmation modals inside Gestor de Pagos */
.rossa-modal-overlay .rossa-modal.rossa-modal--confirm {
  max-width: 440px !important;
  text-align: left !important;
}
.rossa-modal--confirm .rossa-modal__title {
  text-align: left !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.rossa-modal--confirm .rossa-modal__head {
  justify-content: space-between !important;
  padding: 14px 20px !important;
}
.rossa-modal--confirm .rossa-modal__close {
  margin-left: auto !important;
}
.rossa-modal--confirm .rossa-modal__confirmation > div {
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  margin-top: 25px !important;
  max-width: none !important;
  width: auto !important;
}
.rossa-modal--confirm .rossa-modal__confirmation p,
.rossa-modal--confirm .rossa-modal__confirmation {
  font-size: 15px !important;
  color: var(--rossa-ink) !important;
  margin: 0 !important;
  text-align: left !important;
  line-height: 1.5 !important;
}

/* Modales de PAGOS: conviven con el .rossa-modal legacy de
   rossa_components.css (overlay fixed a pantalla completa) */
.rossa-wc-edit .rossa-modal-overlay,
#modal-recurring-payment.rossa-modal-overlay,
#modal-refund-payment.rossa-modal-overlay,
#modal-loading-payment-transaction.rossa-modal-overlay,
#modal-transaction-successfully.rossa-modal-overlay,
#modal-transaction-failed.rossa-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(22, 41, 45, .45) !important;
}
.rossa-wc-edit .rossa-modal-overlay.is-open,
.rossa-wc-edit .rossa-modal-overlay.active,
#modal-recurring-payment.rossa-modal-overlay.is-open,
#modal-recurring-payment.rossa-modal-overlay.active,
#modal-refund-payment.rossa-modal-overlay.is-open,
#modal-refund-payment.rossa-modal-overlay.active,
#modal-loading-payment-transaction.rossa-modal-overlay.is-open,
#modal-loading-payment-transaction.rossa-modal-overlay.active,
#modal-transaction-successfully.rossa-modal-overlay.is-open,
#modal-transaction-successfully.rossa-modal-overlay.active,
#modal-transaction-failed.rossa-modal-overlay.is-open,
#modal-transaction-failed.rossa-modal-overlay.active { display: flex !important; }
.rossa-wc-edit .rossa-modal-overlay .rossa-modal,
#modal-recurring-payment.rossa-modal-overlay .rossa-modal,
#modal-refund-payment.rossa-modal-overlay .rossa-modal,
#modal-loading-payment-transaction.rossa-modal-overlay .rossa-modal,
#modal-transaction-successfully.rossa-modal-overlay .rossa-modal,
#modal-transaction-failed.rossa-modal-overlay .rossa-modal {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 680px !important;
  max-height: 80vh !important;
  background: var(--rossa-white) !important;
  border-radius: var(--rossa-radius) !important;
  font-family: var(--rossa-font) !important;
  color: var(--rossa-ink) !important;
  overflow: hidden !important;
  position: relative !important;
  height: auto !important;
  margin: auto !important;
  inset: unset !important;
}

/* Cabecera y scrollbar a sangre en los modales del GESTOR DE PAGOS */
#contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-modal__head,
#contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-modal__body,
#modal-recurring-payment .rossa-modal__head,
#modal-recurring-payment .rossa-modal__body,
#modal-refund-payment .rossa-modal__head,
#modal-refund-payment .rossa-modal__body,
#modal-loading-payment-transaction .rossa-modal__head,
#modal-loading-payment-transaction .rossa-modal__body,
#modal-transaction-successfully .rossa-modal__head,
#modal-transaction-successfully .rossa-modal__body,
#modal-transaction-failed .rossa-modal__head,
#modal-transaction-failed .rossa-modal__body {
  width: 100% !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}
#contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-modal__body,
#modal-recurring-payment .rossa-modal__body,
#modal-refund-payment .rossa-modal__body,
#modal-loading-payment-transaction .rossa-modal__body,
#modal-transaction-successfully .rossa-modal__body,
#modal-transaction-failed .rossa-modal__body {
  padding: 0 !important;
}

/*=============================================================================
  32. CDN ICON SET — Lucide SVGs from Cloudflare R2 (cdn.rossa.app/icons/)
  ---------------------------------------------------------------------------
  Override-first icon swap. Every icon in the PMS is a FontAwesome <i> element:
  inline `<i class="fas fa-x">` AND the sidebar menu (numeric codes resolve
  through content_icon() -> fa() -> `<i class="fas fa-x">`). So restyling the
  FA classes here re-skins inline icons AND the menu at once, with NO HTML/JS
  changes (golden rules #2/#3).

  TECHNIQUE: each FA icon paints its glyph via `::before { content:"\fXXX" }`.
  We override that `::before`: blank the content and paint the Lucide SVG as a
  CSS mask filled with `currentColor`. Result:
    • color  -> follows `color` (teal links, muted, white-on-teal buttons…)
    • size   -> still driven by the element's `font-size` (1em box) — legacy
               layouts that size icons via font-size keep working unchanged.
  Lucide SVGs ship a baked `stroke="#5C7C84"`; irrelevant — a mask uses the
  alpha channel, so the fill color is `currentColor`, not the baked stroke.

  FALLBACK: icons NOT listed below have no rule, so they keep their original
  FontAwesome glyph. As more SVGs are uploaded to the bucket, add a line here.
  (Intentionally NOT mapped: fa-spin/fa-spinner/fa-circle/fa-pulse — those are
  loading animations and must stay as the FA font.)

  INVARIANT: the set of fa-* names in (a) must equal the set in (b)+(c). A name
  in (a) only renders BLANK (content emptied, nothing painting it); a name in
  (b)/(c) only keeps its FontAwesome glyph and the mask silently does nothing.
  Check with: diff <(names in a) <(names in b+c).

  Bucket audit 2026-08-04 (probed all 1756 Lucide names against the bucket):
  438 Lucide icons available. An earlier version of this comment listed ~30 as
  "missing" (bell, star, save, copy, filter, folder, database, lightbulb, hash,
  send, bot, infinity, plus, minus…): that list was WRONG. Those probes only
  covered English Lucide names, and the bucket also holds ~69 BRAND icons whose
  filenames are in SPANISH (`Filtro`, `Carpeta*`, `Base-datos`, `Folio`, `Precio`,
  `Campana-aviso01`, `Accesos y cerraduras`…). The catalogue of record is
  `new-icons/` at the repo root — look there (in Spanish too) before declaring an
  icon missing, and confirm with a per-name curl (there is no listing endpoint).

  Gap at 2026-08-06: the 12 icons that genuinely did not exist were commissioned
  and are now delivered + uploaded — mapped in block (d) below. `debug.svg`, the
  last hole, was uploaded 2026-08-11 and fa-bug is now mapped.
=============================================================================*/

/* (a) Shared: turn every MAPPED FA icon's ::before into a Lucide SVG mask.
   currentColor fill + 1em box => inherits the icon's existing color & size. */
i.fa-home::before, i.fa-house-user::before,
i.fa-calendar::before, i.fa-calendar-alt::before, i.fa-calendar-week::before,
i.fa-calendar-check::before, i.fa-calendar-plus::before, i.fa-calendar-times::before,
i.fa-clock::before, i.fa-stopwatch::before, i.fa-history::before,
i.fa-search::before, i.fa-eye::before, i.fa-eye-slash::before,
i.fa-edit::before, i.fa-pen::before, i.fa-pencil::before,
i.fa-trash::before, i.fa-trash-alt::before,
i.fa-times::before, i.fa-times-circle::before,
i.fa-check::before, i.fa-check-circle::before, i.fa-circle-check::before, i.fa-check-square::before, i.fa-check-double::before,
i.fa-plus-circle::before, i.fa-exclamation-triangle::before,
i.fa-exclamation-circle::before, i.fa-exclamation::before, i.fa-question-circle::before,
i.fa-download::before, i.fa-power-off::before, i.fa-sign-in-alt::before,
i.fa-undo::before, i.fa-sync::before,
i.fa-cog::before, i.fa-cogs::before, i.fa-tools::before, i.fa-wrench::before,
i.fa-sliders-h::before,
i.fa-chevron-down::before, i.fa-chevron-up::before,
i.fa-chevron-left::before, i.fa-chevron-right::before,
i.fa-angle-left::before, i.fa-angle-right::before,
i.fa-angle-double-left::before, i.fa-angle-double-right::before,
i.fa-chevron-circle-left::before, i.fa-chevron-circle-right::before,
i.fa-arrow-circle-right::before,
i.fa-user::before, i.fa-user-tag::before, i.fa-user-clock::before,
i.fa-user-md::before, i.fa-user-tie::before, i.fa-user-graduate::before,
i.fa-landmark::before,
i.fa-users::before, i.fa-user-friends::before, i.fa-people-arrows::before,
i.fa-user-plus::before, i.fa-user-check::before, i.fa-user-slash::before,
i.fa-user-cog::before, i.fa-users-cog::before, i.fa-user-edit::before,
i.fa-user-shield::before, i.fa-shield-alt::before,
i.fa-id-card::before, i.fa-id-card-alt::before, i.fa-address-card::before,
i.fa-passport::before, i.fa-handshake::before, i.fa-concierge-bell::before,
i.fa-envelope::before, i.fa-mail-bulk::before,
i.fa-envelope-open::before, i.fa-envelope-open-text::before,
i.fa-comments::before, i.fa-sms::before, i.fa-whatsapp::before,
i.fa-phone::before, i.fa-phone-volume::before,
i.fa-bed::before, i.fa-door-closed::before, i.fa-door-open::before, i.fa-toilet::before,
i.fa-hotel::before, i.fa-building::before,
i.fa-key::before, i.fa-lock::before, i.fa-unlock-alt::before,
i.fa-map-marker-alt::before, i.fa-map-signs::before, i.fa-globe::before,
i.fa-swimming-pool::before, i.fa-dog::before, i.fa-coffee::before,
i.fa-glass-cheers::before,
i.fa-credit-card::before, i.fa-euro-sign::before,
i.fa-file-invoice-dollar::before, i.fa-receipt::before,
i.fa-percent::before, i.fa-percentage::before,
i.fa-chart-bar::before, i.fa-poll::before, i.fa-chart-line::before,
i.fa-tags::before, i.fa-tag::before,
i.fa-tasks::before, i.fa-list::before, i.fa-th-list::before, i.fa-stream::before,
i.fa-scroll::before, i.fa-newspaper::before, i.fa-bolt::before,
i.fa-language::before, i.fa-external-link-alt::before, i.fa-link::before, i.fa-share-square::before, i.fa-images::before,
i.fa-suitcase::before, i.fa-plus::before, i.fa-minus::before,
i.fa-play::before,
i.fa-bell::before,
/* --- iconos propios de marca (nombres en español en el bucket) --- */
i.fa-layer-group::before, i.fa-folder-open::before, i.fact-icon-folio::before, i.fa-ban::before,
i.fa-database::before, i.fa-spa::before, i.fa-file-import::before,
i.fa-file-alt::before, i.fa-code-branch::before,
i.fa-battery-full::before, i.fa-battery-three-quarters::before,
i.fa-battery-half::before, i.fa-battery-quarter::before,
i.fa-battery-empty::before,
i.fa-copy::before, i.fa-clone::before, i.fa-sitemap::before,
i.fa-object-group::before, i.fa-baby::before, i.fa-child::before,
i.fa-file-csv::before, i.fa-file-excel::before, i.fa-folder-plus::before,
i.fa-file-export::before, i.fa-table::before, i.fa-calculator::before,
i.fa-font::before, i.fa-magic::before, i.fa-minus-circle::before,
i.fa-leaf::before, i.fa-file-pdf::before,
i.fa-random::before, i.fa-exchange-alt::before, i.fa-compress::before,
i.fa-upload::before, i.fa-sort-up::before, i.fa-sort-down::before,
/* --- 2026-08 batch: classes added with the 79-icon bucket refresh. Every name
   here MUST also appear in the (c) file map below, or the icon renders BLANK
   (content is emptied here, the mask-image is what paints it). --- */
i.fa-suitcase-rolling::before,
i.fa-arrow-left::before, i.fa-arrow-right::before, i.fa-caret-down::before,
i.fa-sync-alt::before, i.fa-bars::before, i.fa-align-justify::before,
i.fa-list-alt::before, i.fa-info-circle::before, i.fa-image::before,
i.fa-camera::before, i.fa-photo-video::before, i.fa-video::before,
i.fa-video-camera::before, i.fa-desktop::before,
i.fa-barcode::before, i.fa-briefcase::before, i.fa-calendar-day::before,
i.fa-th::before, i.fa-sign::before, i.fa-clipboard-list::before,
i.fa-coins::before, i.fa-money-bill-alt::before, i.fa-hand-holding-usd::before,
i.fa-comment::before, i.fa-comment-dots::before, i.fa-compress-alt::before,
i.fa-file-archive::before, i.fa-file-contract::before, i.fa-file-invoice::before,
i.fa-filter::before, i.fa-flag::before, i.fa-hand-paper::before,
i.fa-id-badge::before, i.fa-parking::before, i.fa-pause-circle::before,
i.fa-pie-chart::before, i.fa-school::before, i.fa-sort::before,
i.fa-square::before, i.fa-table-columns::before, i.fa-tachometer-alt::before,
i.fa-unlink::before, i.fa-unlock::before, i.fa-user-circle::before,
i.fa-utensils::before,
/* --- 2026-08-06: los 12 iconos que faltaban y el diseñador ya ha entregado.
   Todos son de la familia de marca (nombre en español en el bucket). Igual que
   el bloque anterior: cada nombre de aquí DEBE estar también en el mapa (d). --- */
i.fa-star::before, i.fa-paper-plane::before, i.fa-lightbulb::before,
i.fa-infinity::before, i.fa-hashtag::before, i.fa-moon::before,
i.fa-box::before, i.fa-boxes::before, i.fa-robot::before,
i.fa-puzzle-piece::before, i.fa-th-large::before, i.fa-balance-scale::before,
i.fa-file-text-o::before, i.fa-file-pdf-o::before, i.fa-level-up::before,
i.fa-file-code::before, i.fa-balance-scale::before,
/* --- 2026-08-21: icono propio de marca para Tasas turísticas (Gestión-tarifas.svg
   en el bucket). Clase dedicada fa-tasas (no fa-receipt, que lo comparten Facturas
   y tickets). Debe estar también en el mapa (b) o se pinta en blanco. --- */
i.fa-tasas::before,
i.fa-bug::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;          mask-repeat: no-repeat;
  -webkit-mask-position: center;           mask-position: center;
  -webkit-mask-size: contain;              mask-size: contain;
}

/* (b) Per-icon file map (FA class -> Lucide file in the bucket). Grouped by
   target SVG; multiple FA names that mean the same thing share one file. */
i.fa-home::before, i.fa-house-user::before                                   { -webkit-mask-image: url("https://cdn.rossa.app/icons/house.svg");          mask-image: url("https://cdn.rossa.app/icons/house.svg"); }
i.fa-calendar::before, i.fa-calendar-alt::before, i.fa-calendar-week::before { -webkit-mask-image: url("https://cdn.rossa.app/icons/calendar.svg");       mask-image: url("https://cdn.rossa.app/icons/calendar.svg"); }
i.fa-calendar-check::before                                                  { -webkit-mask-image: url("https://cdn.rossa.app/icons/calendar-check.svg"); mask-image: url("https://cdn.rossa.app/icons/calendar-check.svg"); }
i.fa-calendar-plus::before                                                   { -webkit-mask-image: url("https://cdn.rossa.app/icons/calendar-plus.svg");  mask-image: url("https://cdn.rossa.app/icons/calendar-plus.svg"); }
i.fa-calendar-times::before                                                  { -webkit-mask-image: url("https://cdn.rossa.app/icons/calendar-x.svg");     mask-image: url("https://cdn.rossa.app/icons/calendar-x.svg"); }
i.fa-clock::before                                                           { -webkit-mask-image: url("https://cdn.rossa.app/icons/clock.svg");          mask-image: url("https://cdn.rossa.app/icons/clock.svg"); }
i.fa-stopwatch::before                                                       { -webkit-mask-image: url("https://cdn.rossa.app/icons/timer.svg");          mask-image: url("https://cdn.rossa.app/icons/timer.svg"); }
i.fa-history::before                                                         { -webkit-mask-image: url("https://cdn.rossa.app/icons/history.svg");        mask-image: url("https://cdn.rossa.app/icons/history.svg"); }
i.fa-search::before                                                          { -webkit-mask-image: url("https://cdn.rossa.app/icons/search.svg");         mask-image: url("https://cdn.rossa.app/icons/search.svg"); }
i.fa-eye::before                                                             { -webkit-mask-image: url("https://cdn.rossa.app/icons/eye.svg");            mask-image: url("https://cdn.rossa.app/icons/eye.svg"); }
i.fa-eye-slash::before                                                       { -webkit-mask-image: url("https://cdn.rossa.app/icons/eye-off.svg");        mask-image: url("https://cdn.rossa.app/icons/eye-off.svg"); }
i.fa-edit::before                                                            { -webkit-mask-image: url("https://cdn.rossa.app/icons/square-pen.svg");     mask-image: url("https://cdn.rossa.app/icons/square-pen.svg"); }
i.fa-pen::before                                                             { -webkit-mask-image: url("https://cdn.rossa.app/icons/pen.svg");            mask-image: url("https://cdn.rossa.app/icons/pen.svg"); }
i.fa-pencil::before                                                          { -webkit-mask-image: url("https://cdn.rossa.app/icons/pencil.svg");         mask-image: url("https://cdn.rossa.app/icons/pencil.svg"); }
i.fa-trash::before                                                           { -webkit-mask-image: url("https://cdn.rossa.app/icons/trash.svg");          mask-image: url("https://cdn.rossa.app/icons/trash.svg"); }
i.fa-trash-alt::before                                                       { -webkit-mask-image: url("https://cdn.rossa.app/icons/trash-2.svg");        mask-image: url("https://cdn.rossa.app/icons/trash-2.svg"); }
i.fa-times::before                                                           { -webkit-mask-image: url("https://cdn.rossa.app/icons/x.svg");              mask-image: url("https://cdn.rossa.app/icons/x.svg"); }
i.fa-times-circle::before                                                    { -webkit-mask-image: url("https://cdn.rossa.app/icons/circle-x.svg");       mask-image: url("https://cdn.rossa.app/icons/circle-x.svg"); }
i.fa-check::before                                                           { -webkit-mask-image: url("https://cdn.rossa.app/icons/check.svg");          mask-image: url("https://cdn.rossa.app/icons/check.svg"); }
i.fa-check-circle::before, i.fa-circle-check::before                         { -webkit-mask-image: url("https://cdn.rossa.app/icons/circle-check.svg");   mask-image: url("https://cdn.rossa.app/icons/circle-check.svg"); }
i.fa-check-square::before                                                    { -webkit-mask-image: url("https://cdn.rossa.app/icons/square-check.svg");   mask-image: url("https://cdn.rossa.app/icons/square-check.svg"); }
i.fa-check-double::before                                                    { -webkit-mask-image: url("https://cdn.rossa.app/icons/check-check.svg");    mask-image: url("https://cdn.rossa.app/icons/check-check.svg"); }
i.fa-plus-circle::before                                                     { -webkit-mask-image: url("https://cdn.rossa.app/icons/circle-plus.svg");    mask-image: url("https://cdn.rossa.app/icons/circle-plus.svg"); }
i.fa-exclamation-triangle::before                                            { -webkit-mask-image: url("https://cdn.rossa.app/icons/triangle-alert.svg"); mask-image: url("https://cdn.rossa.app/icons/triangle-alert.svg"); }
i.fa-exclamation-circle::before, i.fa-exclamation::before                    { -webkit-mask-image: url("https://cdn.rossa.app/icons/circle-alert.svg");   mask-image: url("https://cdn.rossa.app/icons/circle-alert.svg"); }
i.fa-question-circle::before                                                 { -webkit-mask-image: url("https://cdn.rossa.app/icons/circle-question-mark.svg");   mask-image: url("https://cdn.rossa.app/icons/circle-question-mark.svg"); }
i.fa-download::before                                                        { -webkit-mask-image: url("https://cdn.rossa.app/icons/download.svg");       mask-image: url("https://cdn.rossa.app/icons/download.svg"); }
i.fa-power-off::before                                                        { -webkit-mask-image: url("https://cdn.rossa.app/icons/power-off.svg");      mask-image: url("https://cdn.rossa.app/icons/power-off.svg"); }
i.fa-sign-in-alt::before                                                     { -webkit-mask-image: url("https://cdn.rossa.app/icons/log-in.svg");         mask-image: url("https://cdn.rossa.app/icons/log-in.svg"); }
i.fa-undo::before                                                            { -webkit-mask-image: url("https://cdn.rossa.app/icons/rotate-ccw.svg");     mask-image: url("https://cdn.rossa.app/icons/rotate-ccw.svg"); }
i.fa-sync::before                                                            { -webkit-mask-image: url("https://cdn.rossa.app/icons/refresh-cw.svg");     mask-image: url("https://cdn.rossa.app/icons/refresh-cw.svg"); }
i.fa-cog::before, i.fa-cogs::before                                          { -webkit-mask-image: url("https://cdn.rossa.app/icons/settings.svg");       mask-image: url("https://cdn.rossa.app/icons/settings.svg"); }
i.fa-tools::before, i.fa-wrench::before                                       { -webkit-mask-image: url("https://cdn.rossa.app/icons/wrench.svg");         mask-image: url("https://cdn.rossa.app/icons/wrench.svg"); }
i.fa-sliders-h::before                                                       { -webkit-mask-image: url("https://cdn.rossa.app/icons/sliders-horizontal.svg"); mask-image: url("https://cdn.rossa.app/icons/sliders-horizontal.svg"); }
i.fa-chevron-down::before                                                    { -webkit-mask-image: url("https://cdn.rossa.app/icons/chevron-down.svg");   mask-image: url("https://cdn.rossa.app/icons/chevron-down.svg"); }
i.fa-chevron-up::before                                                      { -webkit-mask-image: url("https://cdn.rossa.app/icons/chevron-up.svg");     mask-image: url("https://cdn.rossa.app/icons/chevron-up.svg"); }
i.fa-chevron-left::before, i.fa-angle-left::before                           { -webkit-mask-image: url("https://cdn.rossa.app/icons/chevron-left.svg");   mask-image: url("https://cdn.rossa.app/icons/chevron-left.svg"); }
i.fa-chevron-right::before, i.fa-angle-right::before                         { -webkit-mask-image: url("https://cdn.rossa.app/icons/chevron-right.svg");  mask-image: url("https://cdn.rossa.app/icons/chevron-right.svg"); }
i.fa-angle-double-left::before                                               { -webkit-mask-image: url("https://cdn.rossa.app/icons/chevrons-left.svg");  mask-image: url("https://cdn.rossa.app/icons/chevrons-left.svg"); }
i.fa-angle-double-right::before                                              { -webkit-mask-image: url("https://cdn.rossa.app/icons/chevrons-right.svg"); mask-image: url("https://cdn.rossa.app/icons/chevrons-right.svg"); }
i.fa-chevron-circle-left::before                                             { -webkit-mask-image: url("https://cdn.rossa.app/icons/circle-chevron-left.svg");  mask-image: url("https://cdn.rossa.app/icons/circle-chevron-left.svg"); }
i.fa-chevron-circle-right::before                                            { -webkit-mask-image: url("https://cdn.rossa.app/icons/circle-chevron-right.svg"); mask-image: url("https://cdn.rossa.app/icons/circle-chevron-right.svg"); }
i.fa-arrow-circle-right::before                                              { -webkit-mask-image: url("https://cdn.rossa.app/icons/circle-arrow-right.svg");   mask-image: url("https://cdn.rossa.app/icons/circle-arrow-right.svg"); }
i.fa-user::before, i.fa-user-tag::before, i.fa-user-clock::before,
i.fa-user-md::before, i.fa-user-tie::before, i.fa-user-graduate::before,
i.fa-landmark::before                                                        { -webkit-mask-image: url("https://cdn.rossa.app/icons/user.svg");           mask-image: url("https://cdn.rossa.app/icons/user.svg"); }
i.fa-users::before, i.fa-user-friends::before, i.fa-people-arrows::before    { -webkit-mask-image: url("https://cdn.rossa.app/icons/users.svg");          mask-image: url("https://cdn.rossa.app/icons/users.svg"); }
i.fa-user-plus::before                                                       { -webkit-mask-image: url("https://cdn.rossa.app/icons/user-plus.svg");      mask-image: url("https://cdn.rossa.app/icons/user-plus.svg"); }
i.fa-user-check::before                                                      { -webkit-mask-image: url("https://cdn.rossa.app/icons/user-check.svg");     mask-image: url("https://cdn.rossa.app/icons/user-check.svg"); }
i.fa-user-slash::before                                                      { -webkit-mask-image: url("https://cdn.rossa.app/icons/user-x.svg");         mask-image: url("https://cdn.rossa.app/icons/user-x.svg"); }
i.fa-user-cog::before, i.fa-users-cog::before, i.fa-user-edit::before        { -webkit-mask-image: url("https://cdn.rossa.app/icons/user-cog.svg");       mask-image: url("https://cdn.rossa.app/icons/user-cog.svg"); }
i.fa-user-shield::before                                                     { -webkit-mask-image: url("https://cdn.rossa.app/icons/shield-user.svg");    mask-image: url("https://cdn.rossa.app/icons/shield-user.svg"); }
i.fa-shield-alt::before                                                      { -webkit-mask-image: url("https://cdn.rossa.app/icons/shield-check.svg");   mask-image: url("https://cdn.rossa.app/icons/shield-check.svg"); }
i.fa-id-card::before, i.fa-id-card-alt::before, i.fa-address-card::before,
i.fa-passport::before                                                        { -webkit-mask-image: url("https://cdn.rossa.app/icons/id-card.svg");        mask-image: url("https://cdn.rossa.app/icons/id-card.svg"); }
i.fa-handshake::before                                                       { -webkit-mask-image: url("https://cdn.rossa.app/icons/handshake.svg");      mask-image: url("https://cdn.rossa.app/icons/handshake.svg"); }
i.fa-concierge-bell::before                                                  { -webkit-mask-image: url("https://cdn.rossa.app/icons/concierge-bell.svg"); mask-image: url("https://cdn.rossa.app/icons/concierge-bell.svg"); }
/* ---------------------------------------------------------------------------
   ICONOS PROPIOS DE MARCA — el bucket tiene, además del subconjunto de Lucide,
   un set a medida con nombres EN ESPAÑOL (sentence case, guion, sin tildes:
   "Base-datos", "Carpeta-abierta", "Accesos y cerraduras"). OJO: el bucket es
   case-sensitive ("carpeta" da 404) y no hay endpoint de listado, así que la
   única forma de saber si un nombre existe es un curl directo.    Inventario
   confirmado a 2026-08-06 (+ facturación): Accesos y cerraduras, Agrupaciones,
   Base-datos, Campana-aviso01/02/03, Carpeta*, Crear-folio, Facturación-Manual,
   Filtro, Folio, Folios, Generar-factura, Importar, Precio, Prohibido, Spa,
   Último-Estado, borrador, Carpeta-codigo, Empresa-factura-hotel, …
   --------------------------------------------------------------------------- */
i.fa-bell::before                                                            { -webkit-mask-image: url("https://cdn.rossa.app/icons/Campana-aviso03.svg"); mask-image: url("https://cdn.rossa.app/icons/Campana-aviso03.svg"); }
i.fa-layer-group::before                                                     { -webkit-mask-image: url("https://cdn.rossa.app/icons/Agrupaciones.svg");    mask-image: url("https://cdn.rossa.app/icons/Agrupaciones.svg"); }
i.fa-folder-open::before                                                     { -webkit-mask-image: url("https://cdn.rossa.app/icons/Carpeta-abierta.svg"); mask-image: url("https://cdn.rossa.app/icons/Carpeta-abierta.svg"); }
/* En FACTURACION el `fa-folder-open` significa FOLIO (no "carpeta"): el modulo
   anade `.fact-icon-folio` junto al class legacy para pedir el icono de folio.
   Misma especificidad que la linea de arriba + carga posterior = gana. */
i.fact-icon-folio::before                                                    { -webkit-mask-image: url("https://cdn.rossa.app/icons/Folio.svg");           mask-image: url("https://cdn.rossa.app/icons/Folio.svg"); }
i.fa-ban::before                                                             { -webkit-mask-image: url("https://cdn.rossa.app/icons/Prohibido.svg");       mask-image: url("https://cdn.rossa.app/icons/Prohibido.svg"); }
i.fa-database::before                                                        { -webkit-mask-image: url("https://cdn.rossa.app/icons/Base-datos.svg");      mask-image: url("https://cdn.rossa.app/icons/Base-datos.svg"); }
i.fa-file-import::before                                                     { -webkit-mask-image: url("https://cdn.rossa.app/icons/Importar.svg");        mask-image: url("https://cdn.rossa.app/icons/Importar.svg"); }
/* Spa es de RELLENO (no trazo) y 25×25: como máscara pinta un glifo macizo. */
i.fa-spa::before                                                             { -webkit-mask-image: url("https://cdn.rossa.app/icons/Spa.svg");             mask-image: url("https://cdn.rossa.app/icons/Spa.svg"); }
/* Folio = hoja con la esquina doblada, la forma clásica de "documento". */
i.fa-file-alt::before                                                        { -webkit-mask-image: url("https://cdn.rossa.app/icons/Folio.svg");           mask-image: url("https://cdn.rossa.app/icons/Folio.svg"); }
i.fa-code-branch::before                                                     { -webkit-mask-image: url("https://cdn.rossa.app/icons/trending-up-down.svg"); mask-image: url("https://cdn.rossa.app/icons/trending-up-down.svg"); }

/* NIVEL DE BATERÍA de las cerraduras (classes/class.dispositivos.php:809-819).
   El set del bucket son SIETE variantes, identificadas leyendo sus paths:
   01 rayo (cargando) · 02 tres barras (llena) · 03 una barra (baja) ·
   04 dos barras (media) · 05 signo + (añadir/cambiar) · 06 signo ! (aviso) ·
   07 sin barras (vacía). Los tramos de FA son cinco, así que el único
   solapamiento es arriba: >94% y >65% comparten "llena", que es donde menos
   engaña. OJO: estos nombres llevan TILDE Y ESPACIO -> percent-encoded.
   Libres para asignar: 01 (cargando), 05 (añadir) y 06 (!, encajaría en el
   aviso "bateria_baja" de avisos_render.php:122, que hoy reusa la clase del
   tramo 6-39% y por eso pinta una barra en vez de una alerta). */
i.fa-battery-full::before,
i.fa-battery-three-quarters::before                                          { -webkit-mask-image: url("https://cdn.rossa.app/icons/Bater%C3%ADa%2002.svg"); mask-image: url("https://cdn.rossa.app/icons/Bater%C3%ADa%2002.svg"); }
i.fa-battery-half::before                                                    { -webkit-mask-image: url("https://cdn.rossa.app/icons/Bater%C3%ADa%2004.svg"); mask-image: url("https://cdn.rossa.app/icons/Bater%C3%ADa%2004.svg"); }
i.fa-battery-quarter::before                                                 { -webkit-mask-image: url("https://cdn.rossa.app/icons/Bater%C3%ADa%2003.svg"); mask-image: url("https://cdn.rossa.app/icons/Bater%C3%ADa%2003.svg"); }
i.fa-battery-empty::before                                                   { -webkit-mask-image: url("https://cdn.rossa.app/icons/Bater%C3%ADa%2007.svg"); mask-image: url("https://cdn.rossa.app/icons/Bater%C3%ADa%2007.svg"); }

/* Lote 2026-08-05: clases que seguían con glifo de FontAwesome y que ya tienen
   recambio en el bucket. Los nombres con tilde van percent-encoded. */
i.fa-copy::before, i.fa-clone::before                                        { -webkit-mask-image: url("https://cdn.rossa.app/icons/Copiar-Clonar.svg");    mask-image: url("https://cdn.rossa.app/icons/Copiar-Clonar.svg"); }
i.fa-sitemap::before                                                         { -webkit-mask-image: url("https://cdn.rossa.app/icons/%C3%81rbol-jerarqu%C3%ADa.svg"); mask-image: url("https://cdn.rossa.app/icons/%C3%81rbol-jerarqu%C3%ADa.svg"); }
i.fa-object-group::before                                                    { -webkit-mask-image: url("https://cdn.rossa.app/icons/Fusi%C3%B3n.svg");      mask-image: url("https://cdn.rossa.app/icons/Fusi%C3%B3n.svg"); }
i.fa-baby::before, i.fa-child::before                                        { -webkit-mask-image: url("https://cdn.rossa.app/icons/menores.svg");         mask-image: url("https://cdn.rossa.app/icons/menores.svg"); }
i.fa-file-csv::before, i.fa-file-excel::before                               { -webkit-mask-image: url("https://cdn.rossa.app/icons/CSV.svg");             mask-image: url("https://cdn.rossa.app/icons/CSV.svg"); }
/* Solo se usa en facturación ("Crear folio") → icono de marca Crear-folio. */
i.fa-folder-plus::before                                                     { -webkit-mask-image: url("https://cdn.rossa.app/icons/Crear-folio.svg");  mask-image: url("https://cdn.rossa.app/icons/Crear-folio.svg"); }
i.fa-file-export::before                                                     { -webkit-mask-image: url("https://cdn.rossa.app/icons/Carpeta-output.svg");   mask-image: url("https://cdn.rossa.app/icons/Carpeta-output.svg"); }
i.fa-table::before                                                           { -webkit-mask-image: url("https://cdn.rossa.app/icons/table-properties.svg"); mask-image: url("https://cdn.rossa.app/icons/table-properties.svg"); }
i.fa-calculator::before                                                      { -webkit-mask-image: url("https://cdn.rossa.app/icons/square-pi.svg");       mask-image: url("https://cdn.rossa.app/icons/square-pi.svg"); }
i.fa-font::before                                                            { -webkit-mask-image: url("https://cdn.rossa.app/icons/square-pilcrow.svg");  mask-image: url("https://cdn.rossa.app/icons/square-pilcrow.svg"); }
i.fa-magic::before                                                           { -webkit-mask-image: url("https://cdn.rossa.app/icons/zap.svg");             mask-image: url("https://cdn.rossa.app/icons/zap.svg"); }
i.fa-minus-circle::before                                                    { -webkit-mask-image: url("https://cdn.rossa.app/icons/minus.svg");           mask-image: url("https://cdn.rossa.app/icons/minus.svg"); }
i.fa-leaf::before                                                            { -webkit-mask-image: url("https://cdn.rossa.app/icons/Carpeta-root.svg");    mask-image: url("https://cdn.rossa.app/icons/Carpeta-root.svg"); }
i.fa-file-pdf::before                                                        { -webkit-mask-image: url("https://cdn.rossa.app/icons/scroll-text.svg");     mask-image: url("https://cdn.rossa.app/icons/scroll-text.svg"); }
i.fa-random::before, i.fa-exchange-alt::before                               { -webkit-mask-image: url("https://cdn.rossa.app/icons/iteration-cw.svg");     mask-image: url("https://cdn.rossa.app/icons/iteration-cw.svg"); }
i.fa-compress::before                                                        { -webkit-mask-image: url("https://cdn.rossa.app/icons/chevrons-down-up.svg"); mask-image: url("https://cdn.rossa.app/icons/chevrons-down-up.svg"); }
i.fa-upload::before                                                          { -webkit-mask-image: url("https://cdn.rossa.app/icons/square-arrow-up.svg");  mask-image: url("https://cdn.rossa.app/icons/square-arrow-up.svg"); }
i.fa-sort-up::before                                                         { -webkit-mask-image: url("https://cdn.rossa.app/icons/chevron-up.svg");       mask-image: url("https://cdn.rossa.app/icons/chevron-up.svg"); }
i.fa-sort-down::before                                                       { -webkit-mask-image: url("https://cdn.rossa.app/icons/chevron-down.svg");     mask-image: url("https://cdn.rossa.app/icons/chevron-down.svg"); }
/* fa-filter apuntaba a sliders-horizontal (apaño de cuando no había embudo). */
i.fa-filter::before                                                          { -webkit-mask-image: url("https://cdn.rossa.app/icons/Filtro.svg");          mask-image: url("https://cdn.rossa.app/icons/Filtro.svg"); }

/* --- facturación 2026-08-06: brand Figma ya en CDN + alias FA4 --- */
i.fa-hand-paper::before                                                      { -webkit-mask-image: url("https://cdn.rossa.app/icons/Facturaci%C3%B3n-Manual.svg"); mask-image: url("https://cdn.rossa.app/icons/Facturaci%C3%B3n-Manual.svg"); }
/* fa-camera solo se usa en snapshots de folio ("Último estado conocido"). */
i.fa-camera::before                                                          { -webkit-mask-image: url("https://cdn.rossa.app/icons/%C3%9Altimo-Estado.svg"); mask-image: url("https://cdn.rossa.app/icons/%C3%9Altimo-Estado.svg"); }
i.fa-file-text-o::before                                                     { -webkit-mask-image: url("https://cdn.rossa.app/icons/Folio.svg");           mask-image: url("https://cdn.rossa.app/icons/Folio.svg"); }
i.fa-file-pdf-o::before                                                      { -webkit-mask-image: url("https://cdn.rossa.app/icons/scroll-text.svg");     mask-image: url("https://cdn.rossa.app/icons/scroll-text.svg"); }
/* Línea hija / ajuste: corner-down-right ya apunta al anidado; anular fa-rotate-90. */
i.fa-level-up::before                                                        { -webkit-mask-image: url("https://cdn.rossa.app/icons/corner-down-right.svg"); mask-image: url("https://cdn.rossa.app/icons/corner-down-right.svg"); }
i.fa-level-up.fa-rotate-90                                                   { transform: none; }
i.fa-file-code::before                                                       { -webkit-mask-image: url("https://cdn.rossa.app/icons/Carpeta-codigo.svg");  mask-image: url("https://cdn.rossa.app/icons/Carpeta-codigo.svg"); }
/* "Repartir igual" (combineFolios) → porcentajes iguales. */
i.fa-balance-scale::before                                                   { -webkit-mask-image: url("https://cdn.rossa.app/icons/circle-percent.svg"); mask-image: url("https://cdn.rossa.app/icons/circle-percent.svg"); }
/* Modificadores (clase nueva permitida): botones emitir borrador / generar factura. */
i.fa-file-alt.fa-rossa-draft::before                                         { -webkit-mask-image: url("https://cdn.rossa.app/icons/borrador.svg");        mask-image: url("https://cdn.rossa.app/icons/borrador.svg"); }
i.fa-file-invoice.fa-rossa-gen::before                                       { -webkit-mask-image: url("https://cdn.rossa.app/icons/Generar-factura.svg"); mask-image: url("https://cdn.rossa.app/icons/Generar-factura.svg"); }

/* BLOQUEADOS en facturación (asset ausente en CDN — dejar glifo FA; subir al bucket):
   fa-hashtag → hash.svg | fa-paper-plane → send.svg. fa-save / fa-inbox
   siguen ocultos por decisión de diseño (más abajo). */

/* debug: badge de los modales verifactu y ALDA devtools (subido al CDN 2026-08-11) */
i.fa-bug::before                                                              { -webkit-mask-image: url("https://cdn.rossa.app/icons/debug.svg");           mask-image: url("https://cdn.rossa.app/icons/debug.svg"); }

/* ICONOS RETIRADOS (decisión de diseño 2026-08-05): "Guardar" se queda solo con
   el texto del botón y el estado vacío solo con su mensaje. Se ocultan por CSS
   en vez de borrar el marcado porque 4 de los fa-save (admin/js/complete_setup.js,
   modules/facturacion/src/js/folioEditor.js) y 2 de los fa-inbox
   (folioListRenderer, billWizard.js) los REINYECTA el JS tras cada AJAX: si solo
   se limpiara el PHP, reaparecerían al guardar. No se usan fuera del admin, así
   que la regla por clase es segura sin acotarla a #contenido_admin. Queda un
   &nbsp; suelto delante del rótulo en los botones que lo llevaban. */
i.fa-save,
i.fa-inbox { display: none; }
i.fa-envelope::before, i.fa-mail-bulk::before                                { -webkit-mask-image: url("https://cdn.rossa.app/icons/mail.svg");           mask-image: url("https://cdn.rossa.app/icons/mail.svg"); }
i.fa-envelope-open::before, i.fa-envelope-open-text::before                  { -webkit-mask-image: url("https://cdn.rossa.app/icons/mail-open.svg");      mask-image: url("https://cdn.rossa.app/icons/mail-open.svg"); }
i.fa-comments::before                                                        { -webkit-mask-image: url("https://cdn.rossa.app/icons/message-square.svg"); mask-image: url("https://cdn.rossa.app/icons/message-square.svg"); }
/* SMS y WhatsApp compartían message-circle y salían IDÉNTICOS: en las tarjetas de
   Inicio son dos chips pegados y no había forma de saber cuál era cuál. El SMS
   pasa al bocadillo cuadrado con líneas de texto (que es lo que es, un mensaje de
   texto) y WhatsApp se queda el bocadillo redondo, que es su forma reconocible —
   el bucket no tiene iconos de marca. */
i.fa-sms::before                                                             { -webkit-mask-image: url("https://cdn.rossa.app/icons/message-square-text.svg"); mask-image: url("https://cdn.rossa.app/icons/message-square-text.svg"); }
i.fa-whatsapp::before                                                        { -webkit-mask-image: url("https://cdn.rossa.app/icons/message-circle.svg"); mask-image: url("https://cdn.rossa.app/icons/message-circle.svg"); }
i.fa-phone::before                                                           { -webkit-mask-image: url("https://cdn.rossa.app/icons/phone.svg");          mask-image: url("https://cdn.rossa.app/icons/phone.svg"); }
i.fa-phone-volume::before                                                    { -webkit-mask-image: url("https://cdn.rossa.app/icons/phone-call.svg");     mask-image: url("https://cdn.rossa.app/icons/phone-call.svg"); }
i.fa-bed::before                                                             { -webkit-mask-image: url("https://cdn.rossa.app/icons/bed.svg");            mask-image: url("https://cdn.rossa.app/icons/bed.svg"); }
i.fa-toilet::before                                                          { -webkit-mask-image: url("https://cdn.rossa.app/icons/toilet.svg");         mask-image: url("https://cdn.rossa.app/icons/toilet.svg"); }
i.fa-door-closed::before                                                     { -webkit-mask-image: url("https://cdn.rossa.app/icons/door-closed.svg");    mask-image: url("https://cdn.rossa.app/icons/door-closed.svg"); }
i.fa-door-open::before                                                       { -webkit-mask-image: url("https://cdn.rossa.app/icons/door-open.svg");      mask-image: url("https://cdn.rossa.app/icons/door-open.svg"); }
i.fa-hotel::before                                                           { -webkit-mask-image: url("https://cdn.rossa.app/icons/hotel.svg");          mask-image: url("https://cdn.rossa.app/icons/hotel.svg"); }
i.fa-building::before                                                        { -webkit-mask-image: url("https://cdn.rossa.app/icons/building.svg");       mask-image: url("https://cdn.rossa.app/icons/building.svg"); }
/* fa-key = "códigos" de acceso (antes "llaves") → icono propio de marca del CDN */
i.fa-key::before                                                             { -webkit-mask-image: url("https://cdn.rossa.app/icons/Accesos%20y%20cerraduras.svg"); mask-image: url("https://cdn.rossa.app/icons/Accesos%20y%20cerraduras.svg"); }
i.fa-lock::before                                                            { -webkit-mask-image: url("https://cdn.rossa.app/icons/lock.svg");           mask-image: url("https://cdn.rossa.app/icons/lock.svg"); }
i.fa-unlock-alt::before                                                      { -webkit-mask-image: url("https://cdn.rossa.app/icons/lock-open.svg");      mask-image: url("https://cdn.rossa.app/icons/lock-open.svg"); }
i.fa-map-marker-alt::before                                                  { -webkit-mask-image: url("https://cdn.rossa.app/icons/map-pin.svg");        mask-image: url("https://cdn.rossa.app/icons/map-pin.svg"); }
i.fa-map-signs::before                                                       { -webkit-mask-image: url("https://cdn.rossa.app/icons/map-pinned.svg");     mask-image: url("https://cdn.rossa.app/icons/map-pinned.svg"); }
i.fa-globe::before                                                           { -webkit-mask-image: url("https://cdn.rossa.app/icons/globe.svg");          mask-image: url("https://cdn.rossa.app/icons/globe.svg"); }
i.fa-swimming-pool::before                                                   { -webkit-mask-image: url("https://cdn.rossa.app/icons/waves.svg");          mask-image: url("https://cdn.rossa.app/icons/waves.svg"); }
i.fa-dog::before                                                             { -webkit-mask-image: url("https://cdn.rossa.app/icons/dog.svg");            mask-image: url("https://cdn.rossa.app/icons/dog.svg"); }
i.fa-coffee::before                                                          { -webkit-mask-image: url("https://cdn.rossa.app/icons/coffee.svg");         mask-image: url("https://cdn.rossa.app/icons/coffee.svg"); }
i.fa-glass-cheers::before                                                    { -webkit-mask-image: url("https://cdn.rossa.app/icons/wine.svg");           mask-image: url("https://cdn.rossa.app/icons/wine.svg"); }
i.fa-credit-card::before                                                     { -webkit-mask-image: url("https://cdn.rossa.app/icons/credit-card.svg");    mask-image: url("https://cdn.rossa.app/icons/credit-card.svg"); }
i.fa-euro-sign::before                                                       { -webkit-mask-image: url("https://cdn.rossa.app/icons/euro.svg");           mask-image: url("https://cdn.rossa.app/icons/euro.svg"); }
i.fa-file-invoice-dollar::before, i.fa-receipt::before                       { -webkit-mask-image: url("https://cdn.rossa.app/icons/receipt-euro.svg");   mask-image: url("https://cdn.rossa.app/icons/receipt-euro.svg"); }
i.fa-tasas::before                                                          { -webkit-mask-image: url("https://cdn.rossa.app/icons/Gesti%C3%B3n-tarifas.svg"); mask-image: url("https://cdn.rossa.app/icons/Gesti%C3%B3n-tarifas.svg"); }
i.fa-percent::before, i.fa-percentage::before                                { -webkit-mask-image: url("https://cdn.rossa.app/icons/percent.svg");        mask-image: url("https://cdn.rossa.app/icons/percent.svg"); }
i.fa-chart-bar::before, i.fa-poll::before                                     { -webkit-mask-image: url("https://cdn.rossa.app/icons/chart-bar.svg");      mask-image: url("https://cdn.rossa.app/icons/chart-bar.svg"); }
i.fa-chart-line::before                                                      { -webkit-mask-image: url("https://cdn.rossa.app/icons/chart-line.svg");     mask-image: url("https://cdn.rossa.app/icons/chart-line.svg"); }
i.fa-tags::before                                                            { -webkit-mask-image: url("https://cdn.rossa.app/icons/tags.svg");           mask-image: url("https://cdn.rossa.app/icons/tags.svg"); }
i.fa-tag::before                                                             { -webkit-mask-image: url("https://cdn.rossa.app/icons/tag.svg");            mask-image: url("https://cdn.rossa.app/icons/tag.svg"); }
i.fa-tasks::before                                                           { -webkit-mask-image: url("https://cdn.rossa.app/icons/list-checks.svg");    mask-image: url("https://cdn.rossa.app/icons/list-checks.svg"); }
i.fa-list::before, i.fa-th-list::before, i.fa-stream::before                 { -webkit-mask-image: url("https://cdn.rossa.app/icons/list.svg");           mask-image: url("https://cdn.rossa.app/icons/list.svg"); }
i.fa-scroll::before                                                          { -webkit-mask-image: url("https://cdn.rossa.app/icons/scroll.svg");         mask-image: url("https://cdn.rossa.app/icons/scroll.svg"); }
i.fa-suitcase::before, i.fa-suitcase-rolling::before                         { -webkit-mask-image: url("https://cdn.rossa.app/icons/luggage.svg");        mask-image: url("https://cdn.rossa.app/icons/luggage.svg"); }
i.fa-plus::before                                                            { -webkit-mask-image: url("https://cdn.rossa.app/icons/plus.svg");           mask-image: url("https://cdn.rossa.app/icons/plus.svg"); }
i.fa-minus::before                                                           { -webkit-mask-image: url("https://cdn.rossa.app/icons/minus.svg");          mask-image: url("https://cdn.rossa.app/icons/minus.svg"); }
i.fa-newspaper::before                                                       { -webkit-mask-image: url("https://cdn.rossa.app/icons/newspaper.svg");      mask-image: url("https://cdn.rossa.app/icons/newspaper.svg"); }
i.fa-bolt::before                                                            { -webkit-mask-image: url("https://cdn.rossa.app/icons/zap.svg");            mask-image: url("https://cdn.rossa.app/icons/zap.svg"); }
i.fa-language::before                                                        { -webkit-mask-image: url("https://cdn.rossa.app/icons/languages.svg");      mask-image: url("https://cdn.rossa.app/icons/languages.svg"); }
i.fa-external-link-alt::before                                               { -webkit-mask-image: url("https://cdn.rossa.app/icons/external-link.svg");  mask-image: url("https://cdn.rossa.app/icons/external-link.svg"); }
i.fa-share-square::before                                                    { -webkit-mask-image: url("https://cdn.rossa.app/icons/square-arrow-out-up-right.svg");   mask-image: url("https://cdn.rossa.app/icons/square-arrow-out-up-right.svg"); }
i.fa-images::before                                                          { -webkit-mask-image: url("https://cdn.rossa.app/icons/image.svg");          mask-image: url("https://cdn.rossa.app/icons/image.svg"); }
i.fa-link::before                                                            { -webkit-mask-image: url("https://cdn.rossa.app/icons/link.svg");           mask-image: url("https://cdn.rossa.app/icons/link.svg"); }
i.fa-play::before                                                            { -webkit-mask-image: url("https://cdn.rossa.app/icons/circle-play.svg");    mask-image: url("https://cdn.rossa.app/icons/circle-play.svg"); }

/* (c) 2026-08 batch — mappings enabled by the bucket refresh. Kept as its own
   sub-block (one class per line, no edits to the groups above) so the (a)/(b)
   parity check stays mechanical. Every name here is also in the (a) list.
   fa-suitcase-rolling was ALREADY here sharing luggage.svg but was missing from
   (a); adding it above is what actually makes it paint. */
i.fa-arrow-left::before                                                      { -webkit-mask-image: url("https://cdn.rossa.app/icons/chevron-left.svg");    mask-image: url("https://cdn.rossa.app/icons/chevron-left.svg"); }
i.fa-arrow-right::before                                                     { -webkit-mask-image: url("https://cdn.rossa.app/icons/chevron-right.svg");   mask-image: url("https://cdn.rossa.app/icons/chevron-right.svg"); }
i.fa-caret-down::before                                                      { -webkit-mask-image: url("https://cdn.rossa.app/icons/chevron-down.svg");    mask-image: url("https://cdn.rossa.app/icons/chevron-down.svg"); }
i.fa-sync-alt::before                                                        { -webkit-mask-image: url("https://cdn.rossa.app/icons/refresh-cw.svg");      mask-image: url("https://cdn.rossa.app/icons/refresh-cw.svg"); }
i.fa-bars::before                                                            { -webkit-mask-image: url("https://cdn.rossa.app/icons/menu.svg");            mask-image: url("https://cdn.rossa.app/icons/menu.svg"); }
/* Calendar view switch: "Lineal" = list, its pair-mate "Mensual" (fa-th) = calendar-days. */
i.fa-align-justify::before, i.fa-list-alt::before                            { -webkit-mask-image: url("https://cdn.rossa.app/icons/list.svg");            mask-image: url("https://cdn.rossa.app/icons/list.svg"); }
i.fa-th::before                                                              { -webkit-mask-image: url("https://cdn.rossa.app/icons/calendar-days.svg");   mask-image: url("https://cdn.rossa.app/icons/calendar-days.svg"); }
i.fa-info-circle::before                                                     { -webkit-mask-image: url("https://cdn.rossa.app/icons/info.svg");            mask-image: url("https://cdn.rossa.app/icons/info.svg"); }
i.fa-image::before                                                           { -webkit-mask-image: url("https://cdn.rossa.app/icons/image.svg");           mask-image: url("https://cdn.rossa.app/icons/image.svg"); }
/* camera: en facturación es "Último estado" (máscara brand más arriba). Si se
   usara fuera, habría que separar con modificador; hoy solo vive en folios. */
i.fa-camera::before                                                          { -webkit-mask-image: url("https://cdn.rossa.app/icons/%C3%9Altimo-Estado.svg"); mask-image: url("https://cdn.rossa.app/icons/%C3%9Altimo-Estado.svg"); }
i.fa-video::before, i.fa-video-camera::before, i.fa-photo-video::before      { -webkit-mask-image: url("https://cdn.rossa.app/icons/video.svg");           mask-image: url("https://cdn.rossa.app/icons/video.svg"); }
i.fa-desktop::before                                                         { -webkit-mask-image: url("https://cdn.rossa.app/icons/monitor.svg");         mask-image: url("https://cdn.rossa.app/icons/monitor.svg"); }
i.fa-barcode::before                                                         { -webkit-mask-image: url("https://cdn.rossa.app/icons/scan-barcode.svg");    mask-image: url("https://cdn.rossa.app/icons/scan-barcode.svg"); }
i.fa-briefcase::before                                                       { -webkit-mask-image: url("https://cdn.rossa.app/icons/briefcase.svg");       mask-image: url("https://cdn.rossa.app/icons/briefcase.svg"); }
i.fa-calendar-day::before                                                    { -webkit-mask-image: url("https://cdn.rossa.app/icons/calendar-1.svg");      mask-image: url("https://cdn.rossa.app/icons/calendar-1.svg"); }
/* Content type 113 "Estancias": a stay IS a date range — keeps it distinct from
   fa-bed (114 Habitaciones), which two bed glyphs would not. */
i.fa-sign::before                                                            { -webkit-mask-image: url("https://cdn.rossa.app/icons/calendar-range.svg");  mask-image: url("https://cdn.rossa.app/icons/calendar-range.svg"); }
i.fa-clipboard-list::before                                                  { -webkit-mask-image: url("https://cdn.rossa.app/icons/table-of-contents.svg"); mask-image: url("https://cdn.rossa.app/icons/table-of-contents.svg"); }
i.fa-coins::before                                                           { -webkit-mask-image: url("https://cdn.rossa.app/icons/euro.svg");            mask-image: url("https://cdn.rossa.app/icons/euro.svg"); }
/* coins contextual: en el badge de precio de reubicaciones va "Precio" (brand) */
#relocation-content .room-card-badge i.fa-coins::before                      { -webkit-mask-image: url("https://cdn.rossa.app/icons/Precio.svg");          mask-image: url("https://cdn.rossa.app/icons/Precio.svg"); }
i.fa-money-bill-alt::before                                                  { -webkit-mask-image: url("https://cdn.rossa.app/icons/wallet.svg");          mask-image: url("https://cdn.rossa.app/icons/wallet.svg"); }
i.fa-hand-holding-usd::before                                                { -webkit-mask-image: url("https://cdn.rossa.app/icons/trending-up.svg");     mask-image: url("https://cdn.rossa.app/icons/trending-up.svg"); }
i.fa-comment::before, i.fa-comment-dots::before                              { -webkit-mask-image: url("https://cdn.rossa.app/icons/message-square-text.svg"); mask-image: url("https://cdn.rossa.app/icons/message-square-text.svg"); }
i.fa-compress-alt::before                                                    { -webkit-mask-image: url("https://cdn.rossa.app/icons/chevrons-down-up.svg"); mask-image: url("https://cdn.rossa.app/icons/chevrons-down-up.svg"); }
i.fa-file-archive::before                                                    { -webkit-mask-image: url("https://cdn.rossa.app/icons/paperclip.svg");       mask-image: url("https://cdn.rossa.app/icons/paperclip.svg"); }
i.fa-file-contract::before                                                   { -webkit-mask-image: url("https://cdn.rossa.app/icons/scroll-text.svg");     mask-image: url("https://cdn.rossa.app/icons/scroll-text.svg"); }
i.fa-file-invoice::before                                                    { -webkit-mask-image: url("https://cdn.rossa.app/icons/receipt-euro.svg");    mask-image: url("https://cdn.rossa.app/icons/receipt-euro.svg"); }
/* Misma máscara que el bloque brand de arriba — NO volver a sliders (ganaba por orden). */
i.fa-filter::before                                                          { -webkit-mask-image: url("https://cdn.rossa.app/icons/Filtro.svg");          mask-image: url("https://cdn.rossa.app/icons/Filtro.svg"); }
i.fa-flag::before                                                            { -webkit-mask-image: url("https://cdn.rossa.app/icons/flag.svg");            mask-image: url("https://cdn.rossa.app/icons/flag.svg"); }
/* hand-paper: máscara de marca en el bloque facturación 2026-08-06 (arriba). */
i.fa-id-badge::before                                                        { -webkit-mask-image: url("https://cdn.rossa.app/icons/id-card.svg");         mask-image: url("https://cdn.rossa.app/icons/id-card.svg"); }
i.fa-parking::before                                                         { -webkit-mask-image: url("https://cdn.rossa.app/icons/square-parking.svg");  mask-image: url("https://cdn.rossa.app/icons/square-parking.svg"); }
i.fa-pause-circle::before                                                    { -webkit-mask-image: url("https://cdn.rossa.app/icons/circle-pause.svg");    mask-image: url("https://cdn.rossa.app/icons/circle-pause.svg"); }
i.fa-pie-chart::before                                                       { -webkit-mask-image: url("https://cdn.rossa.app/icons/chart-pie.svg");       mask-image: url("https://cdn.rossa.app/icons/chart-pie.svg"); }
i.fa-school::before                                                          { -webkit-mask-image: url("https://cdn.rossa.app/icons/university.svg");      mask-image: url("https://cdn.rossa.app/icons/university.svg"); }
i.fa-sort::before                                                            { -webkit-mask-image: url("https://cdn.rossa.app/icons/chevrons-up-down.svg"); mask-image: url("https://cdn.rossa.app/icons/chevrons-up-down.svg"); }
i.fa-square::before                                                          { -webkit-mask-image: url("https://cdn.rossa.app/icons/square.svg");          mask-image: url("https://cdn.rossa.app/icons/square.svg"); }
i.fa-table-columns::before                                                   { -webkit-mask-image: url("https://cdn.rossa.app/icons/table-properties.svg"); mask-image: url("https://cdn.rossa.app/icons/table-properties.svg"); }
i.fa-tachometer-alt::before                                                  { -webkit-mask-image: url("https://cdn.rossa.app/icons/chart-no-axes-combined.svg"); mask-image: url("https://cdn.rossa.app/icons/chart-no-axes-combined.svg"); }
i.fa-unlink::before                                                          { -webkit-mask-image: url("https://cdn.rossa.app/icons/unlink.svg");          mask-image: url("https://cdn.rossa.app/icons/unlink.svg"); }
i.fa-unlock::before                                                          { -webkit-mask-image: url("https://cdn.rossa.app/icons/lock-open.svg");       mask-image: url("https://cdn.rossa.app/icons/lock-open.svg"); }
i.fa-user-circle::before                                                     { -webkit-mask-image: url("https://cdn.rossa.app/icons/circle-user.svg");     mask-image: url("https://cdn.rossa.app/icons/circle-user.svg"); }
i.fa-utensils::before                                                        { -webkit-mask-image: url("https://cdn.rossa.app/icons/utensils.svg");        mask-image: url("https://cdn.rossa.app/icons/utensils.svg"); }

/* (d) 2026-08-06 — los 12 iconos del encargo al diseñador (almohadilla, bombilla,
   estrella, enviar, bicicleta, luna, caja, robot, infinito, módulo, cuadrícula y
   balanza). Entregados en `new-icons/` y ya subidos al bucket: los 12 responden
   200. Son de la familia de MARCA, así que el nombre del fichero va en español y
   los que llevan tilde o "º" hay que percent-encodearlos.
   Cada clase de aquí está también en la lista (a) — sin eso saldría en blanco. */
i.fa-star::before                                                            { -webkit-mask-image: url("https://cdn.rossa.app/icons/Destacado.svg");           mask-image: url("https://cdn.rossa.app/icons/Destacado.svg"); }
i.fa-paper-plane::before                                                     { -webkit-mask-image: url("https://cdn.rossa.app/icons/Enviar.svg");              mask-image: url("https://cdn.rossa.app/icons/Enviar.svg"); }
i.fa-lightbulb::before                                                       { -webkit-mask-image: url("https://cdn.rossa.app/icons/Sugerencias.svg");         mask-image: url("https://cdn.rossa.app/icons/Sugerencias.svg"); }
i.fa-infinity::before                                                        { -webkit-mask-image: url("https://cdn.rossa.app/icons/No-Limites.svg");          mask-image: url("https://cdn.rossa.app/icons/No-Limites.svg"); }
/* "#" dentro de una caja redondeada: es el nº de reserva / de factura / de folio. */
i.fa-hashtag::before                                                         { -webkit-mask-image: url("https://cdn.rossa.app/icons/N%C2%BA-habitaciones.svg"); mask-image: url("https://cdn.rossa.app/icons/N%C2%BA-habitaciones.svg"); }
i.fa-moon::before                                                            { -webkit-mask-image: url("https://cdn.rossa.app/icons/Noches.svg");              mask-image: url("https://cdn.rossa.app/icons/Noches.svg"); }
i.fa-box::before, i.fa-boxes::before                                         { -webkit-mask-image: url("https://cdn.rossa.app/icons/Paquete-contenidos.svg");  mask-image: url("https://cdn.rossa.app/icons/Paquete-contenidos.svg"); }
i.fa-robot::before                                                           { -webkit-mask-image: url("https://cdn.rossa.app/icons/ChatBot.svg");             mask-image: url("https://cdn.rossa.app/icons/ChatBot.svg"); }
i.fa-puzzle-piece::before                                                    { -webkit-mask-image: url("https://cdn.rossa.app/icons/M%C3%B3dulo.svg");         mask-image: url("https://cdn.rossa.app/icons/M%C3%B3dulo.svg"); }
/* fa-th ya es calendar-days (conmutador Lineal/Mensual); fa-th-large es la
   rejilla de verdad — la cuadrícula de bloques de "Ver reserva". */
i.fa-th-large::before                                                        { -webkit-mask-image: url("https://cdn.rossa.app/icons/Cuadr%C3%ADcula.svg");     mask-image: url("https://cdn.rossa.app/icons/Cuadr%C3%ADcula.svg"); }
/* La balanza que se pidió: documento + balanza. "Variante524" es el nombre por
   defecto que Figma le puso al exportar — si el diseñador lo renombra en el
   bucket, hay que cambiar esta URL. */
i.fa-balance-scale::before                                                   { -webkit-mask-image: url("https://cdn.rossa.app/icons/Variante524.svg");         mask-image: url("https://cdn.rossa.app/icons/Variante524.svg"); }
/* Alquiler-Bici.svg está entregado y subido pero SIN MAPEAR: no hay ni un solo
   `fa-bicycle` en el código, así que no tiene consumidor todavía. */

/*=============================================================================
  33. ACTION-ICON HELPERS — for legacy <img> icons converted to <i> (Task B)
  ---------------------------------------------------------------------------
  Small table/list action icons that used to be PNG/GIF <img> (editar.png,
  del.png, icon-active.gif…) are migrated to `<i class="fas fa-x rossa-ico
  rossa-ico--MOD">` so they (a) flow through the §32 CDN mask and (b) get a
  consistent size + semantic color. The FA glyph/mask comes from §32; these
  classes only set size + tint. Keep the enclosing <a> and any JS-binding
  classes (addQTip/qtiz/act/temp_act/deli/cambiar-nombre-*) on the new <i>.
=============================================================================*/
.rossa-ico        { font-size: 16px; line-height: 1; vertical-align: -0.15em; cursor: pointer; }
a:hover .rossa-ico { filter: brightness(.85); }
.rossa-ico--edit  { color: var(--rossa-teal); }
.rossa-ico--del   { color: var(--rossa-red); }
.rossa-ico--on    { color: var(--rossa-green); }
.rossa-ico--off   { color: var(--rossa-muted); }
.rossa-ico--info  { color: var(--rossa-cyan); }
.rossa-ico--mail  { color: var(--rossa-teal); }
.rossa-ico--new   { color: var(--rossa-teal); }
.rossa-ico--move  { color: var(--rossa-muted); }

/*=============================================================================
  34. GLOBAL: establishment filter (admin/includes/filter_jerarquia.php)
  ---------------------------------------------------------------------------
  Restyles the standard PMS establishment selector EVERYWHERE it's included
  (Comunicaciones, Disponibilidad y precios, iCal, Ocupación…) so it matches the
  redesign. A global select2 auto-init owns this control (containerCssClass from
  the include doesn't stick), so we SCOPE via the adjacent sibling: select2 always
  inserts its `.select2-container` immediately after `select[name="establecimiento"]`.
  Uses the global Rossa tokens (not the comms-only --c* vars). Specificity beats
  select2's default theme (loads after select2.min.css too) — no !important.
=============================================================================*/
/* Native <select> (also the visual when select2 isn't applied) */
form select.rossa-establecimiento-filter,
#contenido_admin select.rossa-establecimiento-filter {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  font-size: 13px;
  color: var(--rossa-ink);
  background: var(--rossa-white);
  min-width: 240px;
  vertical-align: middle;
}
/* select2 control (closed state) — scoped to the establishment selector only */
select.rossa-establecimiento-filter + .select2-container { min-width: 240px; vertical-align: middle; }
select.rossa-establecimiento-filter + .select2-container--default .select2-selection--single {
  height: 36px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
  display: flex;
  align-items: center;
}
select.rossa-establecimiento-filter + .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--rossa-ink);
  font-size: 13px;
  line-height: 1.3;
  padding-left: 12px;
  padding-right: 28px;
}
select.rossa-establecimiento-filter + .select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px; }
select.rossa-establecimiento-filter + .select2-container--default.select2-container--focus .select2-selection--single,
select.rossa-establecimiento-filter + .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .12);
}
.select2-container--open .select2-dropdown {
  z-index: 10050;
}

/* Barra del filtro: misma caja y separación en todas las pantallas */
.rossa-establecimiento-filter-bar {
  margin: 0 0 16px;
  padding: 16px 18px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-sizing: border-box;
}

.rossa-establecimiento-filter-form {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin: 0;
  width: auto;
  max-width: 100%;
}
/* los <label> del filtro heredaban la Verdana del legacy (lydia.css los pinta
   por elemento): toda la barra en la tipografía del rediseño */
.rossa-establecimiento-filter-form,
.rossa-establecimiento-filter-form label,
.rossa-establecimiento-filter-form select,
.rossa-establecimiento-filter-form input,
.rossa-establecimiento-filter-form option { font-family: var(--rossa-font); }

.rossa-establecimiento-filter-fee {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  flex: 0 1 auto;
}

.rossa-establecimiento-filter-fee label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--rossa-ink);
}

.rossa-establecimiento-filter-field {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px 12px;
  flex: 0 1 auto;
  min-width: 0;
  position: relative;
}

.rossa-establecimiento-filter-field > label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--rossa-ink);
  flex: 0 0 auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  line-height: 1.3;
}

.rossa-establecimiento-filter-field select.rossa-establecimiento-filter {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.rossa-establecimiento-filter-field select.rossa-establecimiento-filter + .select2-container {
  flex: 0 1 auto;
  min-width: 200px;
  max-width: 360px;
  width: auto !important;
}

.rossa-establecimiento-filter-field select.rossa-establecimiento-filter.select2-hidden-accessible {
  flex: 0 0 0;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  clip: rect(0, 0, 0, 0) !important;
}

.rossa-establecimiento-filter-submit {
  margin: 0;
  flex: 0 0 auto;
  align-self: center;
  height: 36px;
  padding: 0 18px;
  box-sizing: border-box;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}

.rossa-establecimiento-filter-form .admin_boton.rossa-establecimiento-filter-submit,
.rossa-establecimiento-filter-form input.rossa-establecimiento-filter-submit {
  margin: 0;
  margin-left: 0;
  margin-right: 0;
  height: 36px;
  padding: 0 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rossa-establecimiento-filter-fee select {
  height: 36px;
  min-width: 180px;
  padding: 0 12px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  font-size: 13px;
  color: var(--rossa-ink);
  background: var(--rossa-white);
  box-sizing: border-box;
}

#contenido_admin .rossa-gestor-estancias-filter-bar {
  margin: 0 0 16px;
}

/* Móvil: select más estrecho; label + select + CARGAR siguen agrupados */
@media (max-width: 600px) {
  .rossa-establecimiento-filter-field select.rossa-establecimiento-filter + .select2-container {
    min-width: 0;
    max-width: min(240px, 52vw);
  }
}

/*=============================================================================
  35. SCREEN: module_config + module_manager (módulos)
  ---------------------------------------------------------------------------
  module_config: INFO / CONFIG / TIMELINE tabs — flat white panels (§25),
  teal primary actions, airy tables. Overrides inline <style> from
  modsGraphicHandler (load order wins).
  module_manager: card grid for the module catalog — same Rossa language.
  rossa-config-forms: shared CONFIG UI (module_config CONFIG tab + configParams).
=============================================================================*/

/* Tab bar + panel wrapper: kill legacy grey box around tab content */
#contenido_admin .tabs.rossa-module-config {
  margin: 14px 0 0;
  padding-bottom: 0;
  border-bottom: 1px solid var(--rossa-border);
}
#contenido_admin .secciones_tabs.rossa-module-config {
  padding: 18px 0 0;
  margin-top: 0;
}
#contenido_admin .secciones_tabs.rossa-module-config > .cont {
  border: 0;
  padding: 0;
}

/* --- Control panel (INFO tab) ----------------------------------------- */
#contenido_admin .control-panel-container {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-shadow: none;
  margin: 0;
  overflow: hidden;
  font-family: var(--rossa-font);
}
#contenido_admin .control-panel-container .module-header {
  background: var(--rossa-white);
  color: var(--rossa-ink);
  padding: 20px 24px;
  border-bottom: 1px solid var(--rossa-border);
  gap: 18px;
}
#contenido_admin .control-panel-container .module-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--rossa-radius);
  background: var(--rossa-surface-2);
  border: 1px solid var(--rossa-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#contenido_admin .control-panel-container .module-icon .module-img-fallback {
  background: var(--rossa-surface-2);
  color: var(--rossa-muted);
  font-size: 1.75rem;
}
#contenido_admin .control-panel-container .module-details h2 {
  margin: 0 0 6px;
  font-family: var(--rossa-font);
  font-size: 20px;
  font-weight: 600;
  color: var(--rossa-navy);
  text-shadow: none;
}
#contenido_admin .control-panel-container .module-description {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--rossa-muted);
  opacity: 1;
}
#contenido_admin .control-panel-container .module-meta {
  gap: 12px;
  font-size: 12px;
  color: var(--rossa-muted);
  opacity: 1;
}
#contenido_admin .control-panel-container .module-meta .module-id,
#contenido_admin .control-panel-container .module-meta .module-version {
  font-weight: 600;
  color: var(--rossa-ink);
}

/* Status badges — flat Rossa pills */
#contenido_admin .control-panel-container .status-badge,
#contenido_admin .control-panel-container .status-value {
  padding: 5px 12px;
  border-radius: var(--rossa-radius-pill);
  font-family: var(--rossa-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  border: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#contenido_admin .control-panel-container .status-badge.status-enabled,
#contenido_admin .control-panel-container .status-value.status-enabled {
  background-color: var(--rossa-green);
  color: var(--rossa-white);
  border-color: var(--rossa-green);
}
#contenido_admin .control-panel-container .status-badge.status-disabled,
#contenido_admin .control-panel-container .status-value.status-disabled {
  background-color: var(--rossa-salmon);
  color: var(--rossa-coral);
  border-color: var(--rossa-coral);
}
#contenido_admin .control-panel-container .status-badge.status-uninstalled,
#contenido_admin .control-panel-container .status-value.status-uninstalled {
  background-color: var(--rossa-surface);
  color: var(--rossa-ink);
  border-color: var(--rossa-border);
}
#contenido_admin .control-panel-container .status-badge.status-unknown,
#contenido_admin .control-panel-container .status-value.status-unknown {
  background-color: var(--rossa-surface);
  color: var(--rossa-muted);
  border-color: var(--rossa-border);
}

/* Three-column card grid — mirrors .rossa-panel (§25) */
#contenido_admin .control-panel-container .control-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  padding: 18px;
}
#contenido_admin .control-panel-container .info-card,
#contenido_admin .control-panel-container .status-card,
#contenido_admin .control-panel-container .actions-card {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-shadow: none;
  overflow: hidden;
}
#contenido_admin .control-panel-container .card-header {
  background: var(--rossa-surface-2);
  color: var(--rossa-teal);
  padding: 12px 18px;
  border-bottom: 1px solid var(--rossa-border);
  gap: 10px;
}
#contenido_admin .control-panel-container .card-header i {
  font-size: 14px;
  color: var(--rossa-teal);
}
#contenido_admin .control-panel-container .card-header h3 {
  margin: 0;
  font-family: var(--rossa-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--rossa-teal) !important;
}
#contenido_admin .control-panel-container .card-content {
  padding: 14px 18px 16px;
}
#contenido_admin .control-panel-container .info-item,
#contenido_admin .control-panel-container .status-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rossa-hairline-soft);
}
#contenido_admin .control-panel-container .info-item:last-child,
#contenido_admin .control-panel-container .status-item:last-child {
  border-bottom: 0;
}
#contenido_admin .control-panel-container .label {
  font-family: var(--rossa-font);
  font-weight: 700;
  font-size: 13px;
  color: var(--rossa-ink);
}
#contenido_admin .control-panel-container .value {
  font-family: var(--rossa-font);
  font-size: 13px;
  color: var(--rossa-muted);
  text-align: right;
}

/* Module tags + dependency chips */
#contenido_admin .control-panel-container .module-tag {
  background: var(--rossa-teal);
  color: var(--rossa-white);
  padding: 4px 10px;
  border-radius: var(--rossa-radius-pill);
  font-size: 11px;
  font-weight: 600;
  margin: 2px;
  transition: background-color .15s ease;
}
#contenido_admin .control-panel-container .module-tag:hover {
  background: #00474d;
  transform: none;
}
#contenido_admin .control-panel-container .dependency-link {
  padding: 4px 10px;
  border-radius: var(--rossa-radius-pill);
  font-family: var(--rossa-font);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid;
  transition: background-color .15s ease, color .15s ease;
}
#contenido_admin .control-panel-container .dependency-link.required {
  background-color: rgba(23, 121, 155, .10);
  color: var(--rossa-cyan);
  border-color: var(--rossa-cyan);
}
#contenido_admin .control-panel-container .dependency-link.required:hover {
  background-color: var(--rossa-cyan);
  color: var(--rossa-white);
}
#contenido_admin .control-panel-container .dependency-link.incompatible {
  background-color: var(--rossa-salmon);
  color: var(--rossa-coral);
  border-color: var(--rossa-coral);
}
#contenido_admin .control-panel-container .dependency-link.incompatible:hover {
  background-color: var(--rossa-coral);
  color: var(--rossa-white);
}

/* Action buttons — admin_boton language */
#contenido_admin .control-panel-container .action-btn,
#contenido_admin .control-panel-container .action-link {
  width: 100%;
  padding: 10px 16px;
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  border: 1px solid transparent;
  box-sizing: border-box;
  transition: background-color .15s ease, border-color .15s ease;
  transform: none;
  box-shadow: none;
}
#contenido_admin .control-panel-container .action-btn:hover,
#contenido_admin .control-panel-container .action-link:hover {
  transform: none;
  box-shadow: none;
}
#contenido_admin .control-panel-container .action-btn.btn-standby,
#contenido_admin .control-panel-container .action-btn.btn-info,
#contenido_admin .control-panel-container .action-btn.module-action-btn.btn-info {
  background-color: var(--rossa-teal);
  color: var(--rossa-white);
  border-color: var(--rossa-teal);
}
#contenido_admin .control-panel-container .action-btn.btn-standby:hover,
#contenido_admin .control-panel-container .action-btn.btn-info:hover {
  background-color: #00474d;
  border-color: #00474d;
}
#contenido_admin .control-panel-container .action-btn.btn-success {
  background-color: var(--rossa-green) !important;
  color: var(--rossa-white) !important;
  border-color: var(--rossa-green) !important;
}
#contenido_admin .control-panel-container .action-btn.btn-success:hover {
  background-color: #148f73 !important;
  border-color: #148f73 !important;
}
#contenido_admin .control-panel-container .action-btn.btn-warning {
  background-color: var(--rossa-coral);
  color: var(--rossa-white);
  border-color: var(--rossa-coral);
}
#contenido_admin .control-panel-container .action-btn.btn-warning:hover {
  background-color: #d44d2a;
  border-color: #d44d2a;
}
#contenido_admin .control-panel-container .action-btn.btn-promote {
  background-color: var(--rossa-teal) !important;
  color: var(--rossa-white) !important;
  border-color: var(--rossa-teal) !important;
}
#contenido_admin .control-panel-container .action-btn.btn-unpromote {
  background-color: var(--rossa-muted) !important;
  color: var(--rossa-white) !important;
  border-color: var(--rossa-muted) !important;
}
#contenido_admin .control-panel-container .action-link.back-link {
  background-color: var(--rossa-white) !important;
  color: var(--rossa-ink) !important;
  border: 1px solid var(--rossa-border) !important;
}
#contenido_admin .control-panel-container .action-link.back-link:hover {
  background-color: var(--rossa-surface-2) !important;
  border-color: var(--rossa-border) !important;
  color: var(--rossa-ink) !important;
}
#contenido_admin .control-panel-container .promotion-indicator {
  color: var(--rossa-coral);
}

/* --- Timeline / history tab ------------------------------------------- */
#contenido_admin .history-container {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-shadow: none;
  margin: 0;
  overflow: hidden;
  font-family: var(--rossa-font);
}
#contenido_admin .history-container .history-header {
  background: var(--rossa-surface-2);
  color: var(--rossa-ink);
  padding: 14px 18px;
  border-bottom: 1px solid var(--rossa-border);
  gap: 12px;
}
#contenido_admin .history-container .history-header h3 {
  margin: 0;
  font-family: var(--rossa-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--rossa-teal);
}
#contenido_admin .history-container .history-header i {
  color: var(--rossa-teal);
}
#contenido_admin .history-container .history-search,
#contenido_admin .history-container .history-filter {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  font-size: 13px;
  color: var(--rossa-ink);
  background: var(--rossa-white);
}
#contenido_admin .history-container .history-search:focus,
#contenido_admin .history-container .history-filter:focus {
  outline: none;
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .12);
  background: var(--rossa-white);
}
#contenido_admin .history-container .history-table-container {
  max-height: 620px;
}
#contenido_admin .history-container .history-table {
  font-family: var(--rossa-font);
  font-size: 13px;
  color: var(--rossa-ink);
}
#contenido_admin .history-container .history-table th {
  background: var(--rossa-white);
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--rossa-muted);
  border-bottom: 1px solid var(--rossa-border);
}
#contenido_admin .history-container .history-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--rossa-hairline-soft);
  vertical-align: middle;
}
#contenido_admin .history-container .history-table tbody tr:hover {
  background-color: var(--rossa-tint);
}
#contenido_admin .history-container .action-badge,
#contenido_admin .history-container .result-badge {
  padding: 4px 10px;
  border-radius: var(--rossa-radius-pill);
  font-family: var(--rossa-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  min-width: 0;
}
#contenido_admin .history-container .action-install,
#contenido_admin .history-container .result-success {
  background-color: var(--rossa-green);
  color: var(--rossa-white);
}
#contenido_admin .history-container .action-uninstall,
#contenido_admin .history-container .result-error {
  background-color: var(--rossa-red);
  color: var(--rossa-white);
}
#contenido_admin .history-container .action-enable {
  background-color: var(--rossa-cyan);
  color: var(--rossa-white);
}
#contenido_admin .history-container .action-disable {
  background-color: var(--rossa-salmon);
  color: var(--rossa-coral);
}
#contenido_admin .history-container .action-updatedb {
  background-color: var(--rossa-teal);
  color: var(--rossa-white);
}
#contenido_admin .history-container .action-promote,
#contenido_admin .history-container .action-unpromote {
  background-color: var(--rossa-surface);
  color: var(--rossa-ink);
  border: 1px solid var(--rossa-border);
}
#contenido_admin .history-container .action-unknown {
  background-color: var(--rossa-surface);
  color: var(--rossa-muted);
  border: 1px solid var(--rossa-border);
}
#contenido_admin .history-container .module-name {
  font-weight: 600;
  color: var(--rossa-cyan);
}
#contenido_admin .history-container .user-cell,
#contenido_admin .history-container .date-cell {
  color: var(--rossa-muted);
}
#contenido_admin .history-container .date-cell {
  font-family: var(--rossa-font);
}
#contenido_admin .history-container .history-expandable-cell {
  color: var(--rossa-cyan);
  text-decoration: underline dotted var(--rossa-border);
}
#contenido_admin .history-container .history-expandable-cell:hover,
#contenido_admin .history-container .history-expandable-cell:focus {
  background-color: var(--rossa-tint);
  text-decoration-color: var(--rossa-teal);
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(0, 94, 102, .15);
}
#contenido_admin .history-container .no-data-message {
  color: var(--rossa-muted);
  font-family: var(--rossa-font);
}
#contenido_admin .history-container .no-data-message i {
  color: var(--rossa-teal);
  opacity: .35;
}

/* History detail modal */
#contenido_admin .history-text-modal-content {
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-shadow: var(--rossa-shadow);
  font-family: var(--rossa-font);
}
#contenido_admin .history-text-modal-header {
  background: var(--rossa-surface-2);
  border-bottom: 1px solid var(--rossa-border);
  padding: 12px 16px;
}
#contenido_admin .history-text-modal-header h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--rossa-teal);
}
#contenido_admin .history-text-modal-close {
  color: var(--rossa-muted);
}
#contenido_admin .history-text-modal-close:hover {
  color: var(--rossa-ink);
}
#contenido_admin .history-text-modal-body {
  color: var(--rossa-ink);
  font-size: 14px;
}

/* --- CONFIG forms (module_config CONFIG tab + configParams) ------------ */
#contenido_admin .rossa-config-forms {
  font-family: var(--rossa-font);
  color: var(--rossa-ink);
}

/* Nested module tabs on configParams (Global / per-module) */
#contenido_admin .rossa-config-forms > .tabs {
  margin: 14px 0 0;
  padding-bottom: 0;
  border-bottom: 1px solid var(--rossa-border);
}
#contenido_admin .rossa-config-forms > .secciones_tabs {
  padding: 18px 0 0;
  margin-top: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
#contenido_admin .rossa-config-forms > .secciones_tabs > .cont,
#contenido_admin .rossa-config-forms.cont {
  border: 0;
  padding: 0;
}

/* Form shell: single airy panel */
#contenido_admin .rossa-config-forms .form_funcionamiento {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  overflow: hidden;
}
#contenido_admin .rossa-config-forms .form_funcionamiento > fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rossa-border);
}
#contenido_admin .rossa-config-forms .form_funcionamiento > fieldset > br {
  display: none;
}
#contenido_admin .rossa-config-forms legend {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 11px 18px;
  background: var(--rossa-surface-2);
  border-bottom: 1px solid var(--rossa-border);
  font-family: var(--rossa-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--rossa-teal);
  text-transform: uppercase;
}

/* Buscador de parámetros (pestaña Funcionamiento): pastilla con lupa dentro,
   foco teal y contador de resultados al lado */
#contenido_admin .config-search-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 14px;
  max-width: 520px;
}
#contenido_admin .config-search-box .config-search-ico {
  position: absolute;
  left: 14px;
  top: 11px;
  width: 15px;
  height: 15px;
  background-color: var(--rossa-muted);
  -webkit-mask: url("https://cdn.rossa.app/icons/search.svg") center / contain no-repeat;
          mask: url("https://cdn.rossa.app/icons/search.svg") center / contain no-repeat;
  pointer-events: none;
}
#contenido_admin .config-search-box input[type="search"] {
  flex: 1 1 auto;
  min-width: 220px;
  box-sizing: border-box;
  padding: 9px 14px 9px 38px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius-pill);
  background: var(--rossa-white);
  font-family: var(--rossa-font);
  font-size: 13px;
  color: var(--rossa-ink);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#contenido_admin .config-search-box input[type="search"]::placeholder {
  color: var(--rossa-muted);
}
#contenido_admin .config-search-box input[type="search"]:focus {
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .12);
}
#contenido_admin .config-search-box {
  flex-wrap: wrap;
}
#contenido_admin .config-search-box .config-search-count {
  flex: 1 1 100%;
  margin: 6px 0 0 15px;
  font-family: var(--rossa-font);
  font-size: 12px;
  font-weight: 600;
  color: var(--rossa-muted);
  white-space: nowrap;
}
#contenido_admin .config-search-box .config-search-count:empty {
  display: none;
}
#contenido_admin .bloqueconfig .config-search-hit {
  font-weight: 700;
}
#contenido_admin #form_funcionamiento.is-searching > br { display: none; }
#contenido_admin #form_funcionamiento.is-searching fieldset { margin: 0 0 12px; }

/* Option rows */
#contenido_admin .rossa-config-forms .bloqueconfig {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  margin: 0;
  padding: 12px 18px;
  background: var(--rossa-white);
  border: 0;
  border-bottom: 1px solid var(--rossa-hairline-soft);
  border-radius: 0;
  font-size: 14px;
  box-sizing: border-box;
  transition: background-color .15s ease;
}
#contenido_admin .rossa-config-forms .bloqueconfig:last-child {
  border-bottom: 0;
}
#contenido_admin .rossa-config-forms .bloqueconfig:hover {
  background: var(--rossa-tint);
  border-color: transparent;
}
#contenido_admin .rossa-config-forms .bloqueconfig:has(.config_textarea) {
  align-items: flex-start;
}
#contenido_admin .rossa-config-forms .info_config_option {
  flex: 1 1 220px;
  min-width: 0;
}
#contenido_admin .rossa-config-forms .linea_config_option {
  position: static;
  top: auto;
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--rossa-ink);
  line-height: 1.35;
  cursor: help;
}
#contenido_admin .rossa-config-forms .bloqueconfig p {
  margin: 4px 0 0;
  padding: 0 0 0 10px;
  border-left: 2px solid var(--rossa-border);
  font-size: 12px;
  color: var(--rossa-muted);
  line-height: 1.4;
}

/* Controls */
#contenido_admin .rossa-config-forms .func_type_selector,
#contenido_admin .rossa-config-forms select.func_type_selector,
#contenido_admin .rossa-config-forms input[type="text"].func_type_selector {
  height: 36px;
  max-width: 320px;
  min-width: 160px;
  padding: 0 12px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
  font-family: var(--rossa-font);
  font-size: 13px;
  color: var(--rossa-ink);
  box-sizing: border-box;
}
#contenido_admin .rossa-config-forms .func_type_selector:focus,
#contenido_admin .rossa-config-forms select.func_type_selector:focus,
#contenido_admin .rossa-config-forms input[type="text"].func_type_selector:focus {
  outline: none;
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .12);
}
#contenido_admin .rossa-config-forms .config_textarea {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
}
#contenido_admin .rossa-config-forms .config_textarea textarea,
#contenido_admin .rossa-config-forms textarea.func_type_selector {
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
  font-family: var(--rossa-font);
  font-size: 13px;
  color: var(--rossa-ink);
  box-sizing: border-box;
  resize: vertical;
}
#contenido_admin .rossa-config-forms .config_textarea textarea:focus,
#contenido_admin .rossa-config-forms textarea.func_type_selector:focus {
  outline: none;
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .12);
}

/* Toggle switches */
#contenido_admin .rossa-config-forms .switch {
  flex: 0 0 auto;
  width: 44px;
  height: 24px;
}
#contenido_admin .rossa-config-forms .slider_switch {
  background-color: var(--rossa-border);
}
#contenido_admin .rossa-config-forms input:checked + .slider_switch {
  background-color: var(--rossa-green-fig);
}
#contenido_admin .rossa-config-forms input:focus + .slider_switch {
  box-shadow: 0 0 0 3px rgba(0, 168, 134, .20);
}
#contenido_admin .rossa-config-forms .slider_switch:before {
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
}
#contenido_admin .rossa-config-forms input:checked + .slider_switch:before {
  transform: translateX(20px);
}

/* Save button */
#contenido_admin .rossa-config-forms input.save_conf_func {
  display: inline-block;
  margin: 16px 18px 18px;
  padding: 9px 16px;
  background-color: var(--rossa-teal);
  color: var(--rossa-white);
  border: 1px solid var(--rossa-teal);
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
#contenido_admin .rossa-config-forms input.save_conf_func:hover {
  background-color: #00474d;
  border-color: #00474d;
}
#contenido_admin .rossa-config-forms input.save_conf_func:active {
  background-color: #003a40;
}

/* Empty state */
#contenido_admin .rossa-config-forms > p i,
#contenido_admin .rossa-config-forms .secciones_tabs > p i {
  font-style: normal;
  color: var(--rossa-muted);
  font-size: 14px;
}

@media (max-width: 700px) {
  #contenido_admin .rossa-config-forms .bloqueconfig {
    flex-direction: column;
    align-items: stretch;
  }
  #contenido_admin .rossa-config-forms .func_type_selector,
  #contenido_admin .rossa-config-forms select.func_type_selector,
  #contenido_admin .rossa-config-forms input[type="text"].func_type_selector {
    max-width: 100%;
    width: 100%;
  }
  #contenido_admin .rossa-config-forms .switch {
    align-self: flex-start;
  }
}

/* --- module_manager: card grid ---------------------------------------- */
#contenido_admin .rossa-module-manager .rossa-module-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 4px 0 4px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--rossa-border);
  font-family: var(--rossa-font);
}
#contenido_admin .rossa-module-manager .rossa-module-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#contenido_admin .rossa-module-manager .rossa-module-filter {
  appearance: none;
  border: 1px solid var(--rossa-border);
  background: #fff;
  color: var(--rossa-muted);
  font-family: var(--rossa-font);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--rossa-radius-pill);
  cursor: pointer;
}
#contenido_admin .rossa-module-manager .rossa-module-filter.is-active {
  background: var(--rossa-teal);
  border-color: var(--rossa-teal);
  color: #fff;
}
#contenido_admin .rossa-module-manager .rossa-module-sort {
  display: flex;
  align-items: center;
  gap: 8px;
}
#contenido_admin .rossa-module-manager .rossa-module-sort label {
  font-size: 13px;
  font-weight: 600;
  color: var(--rossa-muted);
  white-space: nowrap;
}
#contenido_admin .rossa-module-manager .rossa-module-sort select {
  min-width: 210px;
  padding: 7px 10px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  font-size: 13px;
  color: var(--rossa-ink);
  background: #fff;
}
#contenido_admin .rossa-module-manager .rossa-module-sort select:focus {
  outline: none;
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .18);
}
#contenido_admin .rossa-module-manager .rossa-module-empty {
  margin: 24px 0 8px;
  text-align: center;
  color: var(--rossa-muted);
  font-size: 14px;
}

#contenido_admin .rossa-module-manager .modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  padding: 18px 0 0;
  font-family: var(--rossa-font);
  align-items: stretch;
}
#contenido_admin .rossa-module-manager .module-card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 360px;
  min-height: 360px;
  max-height: 360px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  padding: 14px;
  background: var(--rossa-white);
  box-shadow: none;
  overflow: hidden;
}
#contenido_admin .rossa-module-manager .module-card[hidden] {
  display: none !important;
}

/*
 * Distinción discreta: los activos se ven “normales”;
 * los que no lo están se atenúan (sin teñir toda la ficha).
 */
#contenido_admin .rossa-module-manager .module-card.module-card--status-enabled {
  background: var(--rossa-white);
  border-color: var(--rossa-border);
}
#contenido_admin .rossa-module-manager .module-card.module-card--status-enabled .module-info h3 {
  color: var(--rossa-ink);
}
#contenido_admin .rossa-module-manager .module-card.module-card--status-enabled .module-image img,
#contenido_admin .rossa-module-manager .module-card.module-card--status-enabled .module-img-fallback {
  filter: none;
  opacity: 1;
}
#contenido_admin .rossa-module-manager .module-card.module-card--status-enabled .module-status-badge {
  /* badge un poco más presente solo en activos */
  font-size: 11px;
  padding: 5px 11px;
}

#contenido_admin .rossa-module-manager .module-card.module-card--status-disabled {
  background: var(--rossa-white);
  border-color: var(--rossa-border);
}
#contenido_admin .rossa-module-manager .module-card.module-card--status-disabled .module-image img,
#contenido_admin .rossa-module-manager .module-card.module-card--status-disabled .module-img-fallback {
  filter: grayscale(1);
  opacity: .55;
}
#contenido_admin .rossa-module-manager .module-card.module-card--status-disabled .module-info h3 {
  color: var(--rossa-muted);
  font-weight: 500;
}
#contenido_admin .rossa-module-manager .module-card.module-card--status-disabled .module-info > p:not(.module-status-meta),
#contenido_admin .rossa-module-manager .module-card.module-card--status-disabled .module-status-meta {
  opacity: .75;
}
#contenido_admin .rossa-module-manager .module-card.module-card--status-disabled .module-actions {
  opacity: .85;
}

#contenido_admin .rossa-module-manager .module-card.module-card--status-uninstalled,
#contenido_admin .rossa-module-manager .module-card.module-card--status-unknown {
  background: var(--rossa-white);
  border-color: var(--rossa-border);
  opacity: .82;
}
#contenido_admin .rossa-module-manager .module-card.module-card--status-uninstalled .module-image img,
#contenido_admin .rossa-module-manager .module-card.module-card--status-uninstalled .module-img-fallback,
#contenido_admin .rossa-module-manager .module-card.module-card--status-unknown .module-image img,
#contenido_admin .rossa-module-manager .module-card.module-card--status-unknown .module-img-fallback {
  filter: grayscale(1);
  opacity: .4;
}
#contenido_admin .rossa-module-manager .module-card.module-card--status-uninstalled .module-info h3,
#contenido_admin .rossa-module-manager .module-card.module-card--status-unknown .module-info h3 {
  color: var(--rossa-muted);
  font-weight: 500;
}
#contenido_admin .rossa-module-manager .module-card.module-card--status-uninstalled .module-info > p:not(.module-status-meta),
#contenido_admin .rossa-module-manager .module-card.module-card--status-uninstalled .module-status-meta,
#contenido_admin .rossa-module-manager .module-card.module-card--status-unknown .module-info > p:not(.module-status-meta),
#contenido_admin .rossa-module-manager .module-card.module-card--status-unknown .module-status-meta {
  opacity: .7;
}
#contenido_admin .rossa-module-manager .module-image {
  position: relative;
  flex: 0 0 auto;
  margin-bottom: 10px;
}
#contenido_admin .rossa-module-manager .module-image img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--rossa-radius);
  border: 1px solid var(--rossa-hairline-soft);
  display: block;
}
#contenido_admin .rossa-module-manager .module-img-fallback {
  width: 100%;
  height: 140px;
  border-radius: var(--rossa-radius);
  background: var(--rossa-surface-2);
  border: 1px solid var(--rossa-hairline-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rossa-muted);
  font-size: 2.5rem;
}
#contenido_admin .rossa-module-manager .module-info {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#contenido_admin .rossa-module-manager .module-info h3 {
  margin: 0 0 6px;
  font-family: var(--rossa-font);
  font-size: 16px;
  font-weight: 600;
  color: var(--rossa-navy);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
#contenido_admin .rossa-module-manager .module-info h3 .promotion-indicator {
  color: var(--rossa-coral);
  font-size: .85em;
  margin-left: 4px;
}
#contenido_admin .rossa-module-manager .module-info > p:not(.module-status-meta) {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--rossa-muted);
  flex: 1 1 auto;
  min-height: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
#contenido_admin .rossa-module-manager .module-status-meta {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--rossa-muted);
  line-height: 1.35;
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#contenido_admin .rossa-module-manager .module-card--status-enabled .module-status-meta {
  color: var(--rossa-teal);
}
#contenido_admin .rossa-module-manager .module-status-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--rossa-radius-pill);
  font-family: var(--rossa-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  border: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  line-height: 1.2;
}
#contenido_admin .rossa-module-manager .module-status-badge i {
  font-size: 12px;
  line-height: 1;
}
#contenido_admin .rossa-module-manager .module-status-badge.status-enabled {
  background-color: var(--rossa-green);
  color: var(--rossa-white);
  border-color: var(--rossa-green);
}
#contenido_admin .rossa-module-manager .module-status-badge.status-disabled {
  background-color: var(--rossa-salmon);
  color: var(--rossa-coral);
  border-color: var(--rossa-coral);
}
#contenido_admin .rossa-module-manager .module-status-badge.status-uninstalled {
  background-color: #fff;
  color: var(--rossa-muted);
  border-color: var(--rossa-border);
}
#contenido_admin .rossa-module-manager .module-status-badge.status-unknown {
  background-color: var(--rossa-surface);
  color: var(--rossa-muted);
  border-color: var(--rossa-border);
}
#contenido_admin .rossa-module-manager .module-actions {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rossa-hairline-soft);
}
#contenido_admin .rossa-module-manager .module-actions > a {
  display: inline-flex;
  color: inherit;
  text-decoration: none;
  line-height: 0;
}
#contenido_admin .rossa-module-manager .module-action-btn {
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 42px;
  width: 42px;
  height: 42px;
  padding: 0 !important;
  border-radius: var(--rossa-radius);
  font-size: 18px;
  line-height: 1;
  border: 1px solid transparent;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: none !important;
  cursor: pointer;
  transition: none;
}
#contenido_admin .rossa-module-manager .module-action-btn i {
  display: block;
  font-size: 18px;
  line-height: 1;
  width: 1em;
  height: 1em;
  color: inherit;
  pointer-events: none;
}
/* Masked Lucide icons (§32): fill the 1em box inside the chip */
#contenido_admin .rossa-module-manager .module-action-btn i::before {
  width: 1em;
  height: 1em;
  vertical-align: 0;
}
#contenido_admin .rossa-module-manager .module-action-btn.btn-standby,
#contenido_admin .rossa-module-manager .module-action-btn.btn-info,
#contenido_admin .rossa-module-manager .module-action-btn.btn-standby:hover,
#contenido_admin .rossa-module-manager .module-action-btn.btn-info:hover {
  background-color: var(--rossa-teal);
  color: var(--rossa-white);
  border-color: var(--rossa-teal);
}
#contenido_admin .rossa-module-manager .module-action-btn.btn-warning,
#contenido_admin .rossa-module-manager .module-action-btn.btn-warning:hover {
  background-color: var(--rossa-coral);
  color: var(--rossa-white);
  border-color: var(--rossa-coral);
}
#contenido_admin .rossa-module-manager .module-action-btn.btn-success,
#contenido_admin .rossa-module-manager .module-action-btn.btn-success:hover {
  background-color: var(--rossa-green) !important;
  color: var(--rossa-white) !important;
  border-color: var(--rossa-green) !important;
}
#contenido_admin .rossa-module-manager .module-action-btn.completed {
  background-color: var(--rossa-green) !important;
  color: var(--rossa-white) !important;
  border-color: var(--rossa-green) !important;
  opacity: .85;
}
#contenido_admin .rossa-module-manager .module-action-btn.error,
#contenido_admin .rossa-module-manager .module-action-btn.error:hover,
#contenido_admin .rossa-module-manager .module-action-btn.btn-error,
#contenido_admin .rossa-module-manager .module-action-btn.btn-error:hover {
  background-color: var(--rossa-red) !important;
  color: var(--rossa-white) !important;
  border-color: var(--rossa-red) !important;
  opacity: .85;
}
/* Anular hovers legacy del CSS inline de modsGraphicHandler */
#contenido_admin .rossa-module-manager .module-action-btn:hover,
#contenido_admin .rossa-module-manager .module-card:hover,
#contenido_admin .rossa-module-manager .rossa-module-filter:hover {
  transform: none !important;
  box-shadow: none !important;
}
#contenido_admin .rossa-module-manager .update-database-btn {
  position: relative;
  overflow: visible;
}
#contenido_admin .rossa-module-manager .update-indicator {
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  background-color: var(--rossa-red);
  border: 2px solid var(--rossa-white);
}

@media (max-width: 768px) {
  #contenido_admin .control-panel-container .control-panel-grid {
    grid-template-columns: 1fr;
    padding: 14px;
  }
  #contenido_admin .control-panel-container .module-header {
    padding: 16px;
    flex-direction: column;
    text-align: center;
  }
  #contenido_admin .control-panel-container .module-info-section {
    flex-direction: column;
    text-align: center;
  }
  #contenido_admin .history-container .history-header {
    flex-direction: column;
    align-items: stretch;
  }
  #contenido_admin .history-container .history-filters {
    flex-direction: column;
    align-items: stretch;
  }
  #contenido_admin .rossa-module-manager .modules-grid {
    grid-template-columns: 1fr;
    padding-top: 14px;
  }
  #contenido_admin .rossa-module-manager .rossa-module-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  #contenido_admin .rossa-module-manager .rossa-module-sort {
    justify-content: space-between;
  }
  #contenido_admin .rossa-module-manager .rossa-module-sort select {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/*=============================================================================
  36. PROFILES — tabla centralizada + formulario + asignación
  ---------------------------------------------------------------------------
  profilesCommonTrait::renderProfilesTable(), profilesConfigFormsTrait::renderForm()
  and admin/asigProfiles.php. Scoped via .rossa-profiles / .rossa-profile-config /
  .rossa-profiles-asig so other #perfiles_fact tables keep §18 defaults.
=============================================================================*/

/* --- List table (perfiles_fact in module pests) ------------------------- */
#contenido_admin .rossa-profiles {
  width: 100%;
  max-width: none;
  margin-top: 12px;
  font-family: var(--rossa-font);
}
#contenido_admin .rossa-profiles-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
}
#contenido_admin .rossa-profiles #perfiles_fact.rossa-profiles-table {
  margin-bottom: 0;
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  background: transparent;
}
#contenido_admin .rossa-profiles #perfiles_fact tr.cab:first-child td {
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--rossa-teal);
  background: var(--rossa-surface-2);
  border-top: 0 !important;
  border-bottom: 1px solid var(--rossa-border) !important;
  padding: 12px 14px;
}
#contenido_admin .rossa-profiles #perfiles_fact tr.rossa-profiles-table__head td,
#contenido_admin .rossa-profiles #perfiles_fact tr.cab.rossa-profiles-table__head td {
  text-align: center;
  padding: 9px 12px;
  font-size: 11px;
  letter-spacing: .04em;
}
#contenido_admin .rossa-profiles #perfiles_fact tr.rossa-profiles-table__head td:first-child,
#contenido_admin .rossa-profiles #perfiles_fact tr.cab.rossa-profiles-table__head td:first-child {
  text-align: left;
}
#contenido_admin .rossa-profiles #perfiles_fact tbody > tr:not(.cab) td {
  padding: 10px 12px;
  vertical-align: middle;
}
#contenido_admin .rossa-profiles #perfiles_fact .rossa-profiles-table__name {
  text-align: left;
  font-weight: 600;
  color: var(--rossa-navy);
  min-width: 8rem;
}
#contenido_admin .rossa-profiles #perfiles_fact .rossa-profiles-table__name-with-abbr {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}
#contenido_admin .rossa-profiles #perfiles_fact .rossa-profiles-table__name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#contenido_admin .rossa-profiles #perfiles_fact tbody > tr:not(.cab) td:not(.rossa-profiles-table__name):not(.rossa-profiles-ops) {
  text-align: center;
  color: var(--rossa-muted);
  font-size: 13px;
}
#contenido_admin .rossa-profiles #perfiles_fact tbody > tr:not(.cab) td.rossa-profiles-table__field--profile_description {
  text-align: left;
  max-width: 28rem;
  color: var(--rossa-ink);
  font-weight: 400;
}
#contenido_admin .rossa-profiles #perfiles_fact .rossa-profiles-color-swatch {
  display: inline-block;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 4px;
  border: 1px solid var(--rossa-border);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  vertical-align: middle;
}
#contenido_admin .rossa-profiles #perfiles_fact td.rossa-profiles-table__field--color {
  width: 1%;
  white-space: nowrap;
}
#contenido_admin .rossa-profile-config__abbr-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
#contenido_admin .rossa-fact-abbr,
#contenido_admin .fv-profile-abbr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  min-width: 2.1rem;
  padding: 0;
  border-radius: 50%;
  background: var(--rossa-teal);
  border: none;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  box-sizing: border-box;
  vertical-align: middle;
  flex-shrink: 0;
}
#contenido_admin .rossa-fact-abbr--lg,
#contenido_admin .fv-profile-abbr--lg {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  font-size: 0.8rem;
}
#contenido_admin .rossa-fact-abbr--len3 {
  font-size: 0.58rem;
  letter-spacing: 0.02em;
}
#contenido_admin .rossa-fact-abbr--lg.rossa-fact-abbr--len3 {
  font-size: 0.7rem;
}
#contenido_admin .rossa-profiles #perfiles_fact tbody > tr:not(.cab):hover td {
  background-color: var(--rossa-tint);
}
#contenido_admin .rossa-profiles #perfiles_fact tr.warni td {
  background: var(--rossa-salmon) !important;
  color: var(--rossa-coral);
  font-weight: 600;
  font-style: normal;
}
#contenido_admin .rossa-profiles #perfiles_fact tr.warni:hover td {
  background: #fbe0d8 !important;
}

#contenido_admin .rossa-profiles #perfiles_fact tr.cab td:last-child {
  min-width: 9.5rem;
}
#contenido_admin .rossa-profiles #perfiles_fact td.rossa-profiles-ops {
  padding: 6px 8px;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

/* Operaciones: rejilla en wrapper interno (nunca display:grid en el <td>) */
#contenido_admin .rossa-profiles-ops__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: 4px;
  width: max-content;
  max-width: 28rem;
  min-width: 9.5rem;
  margin-left: auto;
  padding: 0;
  box-sizing: border-box;
}
#contenido_admin .rossa-profiles-ops__form {
  display: contents;
  margin: 0;
}
#contenido_admin .rossa-profiles-ops__btn,
#contenido_admin .rossa-profiles-ops .admin_boton,
#contenido_admin .rossa-profiles-ops button.admin_boton {
  width: 100%;
  min-width: 0;
  min-height: 1.625rem;
  height: auto;
  margin: 0;
  padding: 3px 5px;
  border-radius: 5px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: var(--rossa-font);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .01em;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  box-sizing: border-box;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
#contenido_admin .rossa-profiles-ops__btn i,
#contenido_admin .rossa-profiles-ops .admin_boton i {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
  width: 1em;
  height: 1em;
  opacity: .92;
}
#contenido_admin .rossa-profiles-ops__btn span {
  flex: 1 1 auto;
  min-width: 0;
}
/* Editar: outline teal (menos bloque sólido en la fila) */
#contenido_admin .rossa-profiles-ops__btn--edit {
  background-color: var(--rossa-white);
  color: var(--rossa-teal);
  border: 1px solid rgba(0, 94, 102, .45);
}
#contenido_admin .rossa-profiles-ops__btn--edit:hover {
  background-color: rgba(0, 94, 102, .07);
  border-color: var(--rossa-teal);
  color: var(--rossa-teal);
}
#contenido_admin .rossa-profiles-ops__btn--edit i {
  font-size: 11px;
}
/* Eliminar / restaurar */
#contenido_admin .rossa-profiles-ops__btn--delete i,
#contenido_admin .rossa-profiles-ops__btn--restore i {
  font-size: 11px;
}
#contenido_admin .rossa-profiles-ops__btn--restore {
  background-color: var(--rossa-white);
  border: 1px solid rgba(0, 94, 102, .45);
  color: var(--rossa-teal);
}
#contenido_admin .rossa-profiles-ops__btn--restore:hover {
  background-color: rgba(0, 94, 102, .07);
  border-color: var(--rossa-teal);
  color: var(--rossa-teal);
}
/* Secundarios: ghost muy ligero */
#contenido_admin .rossa-profiles-ops a.admin_boton.admin_boton--ghost,
#contenido_admin .rossa-profiles-ops a.admin_boton[href*="fromProfile"],
#contenido_admin .rossa-profiles-ops a.admin_boton[href*="modpage="],
#contenido_admin .rossa-profiles-ops a.admin_boton[href*="module=module_config"] {
  background-color: transparent;
  color: var(--rossa-muted);
  border: 1px solid var(--rossa-hairline-soft);
}
#contenido_admin .rossa-profiles-ops a.admin_boton.admin_boton--ghost:hover,
#contenido_admin .rossa-profiles-ops a.admin_boton[href*="fromProfile"]:hover,
#contenido_admin .rossa-profiles-ops a.admin_boton[href*="modpage="]:hover,
#contenido_admin .rossa-profiles-ops a.admin_boton[href*="module=module_config"]:hover {
  background-color: var(--rossa-tint);
  border-color: var(--rossa-border);
  color: var(--rossa-ink);
}
#contenido_admin .rossa-profiles-ops a.admin_boton.admin_boton--ghost:hover i,
#contenido_admin .rossa-profiles-ops a.admin_boton[href*="fromProfile"]:hover i,
#contenido_admin .rossa-profiles-ops a.admin_boton[href*="modpage="]:hover i,
#contenido_admin .rossa-profiles-ops a.admin_boton[href*="module=module_config"]:hover i {
  opacity: 1;
}
/* Eliminar: tinte suave, no bloque coral pleno */
#contenido_admin .rossa-profiles-ops .admin_boton--danger {
  background-color: transparent;
  border: 1px solid rgba(234, 92, 54, .35);
  color: var(--rossa-coral);
}
#contenido_admin .rossa-profiles-ops .admin_boton--danger:hover {
  background-color: var(--rossa-salmon);
  border-color: rgba(234, 92, 54, .5);
  color: var(--rossa-coral);
}
#contenido_admin .rossa-profiles-ops .admin_boton:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Toolbar bajo la tabla */
#contenido_admin .rossa-profiles-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rossa-border);
}
#contenido_admin .rossa-profiles-toolbar > a.admin_boton,
#contenido_admin .rossa-profiles-toolbar__form .admin_boton {
  margin: 0;
  min-height: 36px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1.25;
  white-space: nowrap;
}
#contenido_admin .rossa-profiles-toolbar__form {
  display: flex;
  align-items: center;
  margin: 0 0 0 auto;
}
#contenido_admin .rossa-profiles-toolbar__form--toggle .admin_boton {
  color: var(--rossa-muted);
}
#contenido_admin .rossa-profiles-toolbar__form--toggle .admin_boton:hover {
  color: var(--rossa-ink);
}

/* Enlaces a ficha de perfil en otras tablas */
#contenido_admin a[href*="module=profileConfig"]:not(.admin_boton) {
  color: var(--rossa-cyan);
  font-weight: 600;
  text-decoration: none;
}
#contenido_admin a[href*="module=profileConfig"]:not(.admin_boton):hover {
  text-decoration: underline;
}

/* --- Formulario crear/editar perfil (profileConfig popup) -------------- */
#contenido_admin .rossa-profile-config {
  max-width: min(1120px, 100%);
  margin: 0;
  padding: 20px 22px 24px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
  box-shadow: none;
  font-family: var(--rossa-font);
  color: var(--rossa-ink);
}
#contenido_admin .rossa-profile-config:has(.rossa-profile-config__nomenclatura-layout) {
  max-width: min(1120px, 100%);
}
#contenido_admin.rossa-profile-config-page:not(.isiframe) .rossa-profile-config {
  margin: 0;
}
#contenido_admin.rossa-profile-config-page > h1 {
  margin-bottom: 14px;
}
#contenido_admin.isiframe.rossa-profile-config-page > h1,
#contenido_admin.isiframe:has(.rossa-profile-config) > h1 {
  display: none;
}
#contenido_admin .rossa-profile-config__title {
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rossa-border);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--rossa-navy);
}
#contenido_admin .rossa-profile-config form,
#contenido_admin .rossa-profile-config__form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#contenido_admin .rossa-profile-config__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
#contenido_admin .rossa-profile-config__section + .rossa-profile-config__section {
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--rossa-border);
}
#contenido_admin .rossa-profile-config__section-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rossa-muted);
}
#contenido_admin .rossa-profile-config__section-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#contenido_admin .rossa-profile-config__row {
  display: grid;
  gap: 12px 14px;
  align-items: start;
}
#contenido_admin .rossa-profile-config__row--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#contenido_admin .rossa-profile-config__row--full {
  grid-template-columns: minmax(0, 1fr);
}
#contenido_admin .rossa-profile-config__cell {
  min-width: 0;
}
#contenido_admin .rossa-profile-config__cell > .form-group,
#contenido_admin .rossa-profile-config__field--geo.form-group,
#contenido_admin .rossa-profile-config__field--nomenclatura.form-group {
  margin: 0;
  height: 100%;
}
#contenido_admin .rossa-profile-config__cell > .form-group {
  display: flex;
  flex-direction: column;
}
#contenido_admin .rossa-profile-config__field--geo > .rossa-profile-config__row--pair {
  margin: 0;
}
#contenido_admin .rossa-profile-config__hint {
  margin: -2px 0 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--rossa-muted);
}
#contenido_admin .rossa-profile-config .form-group {
  margin: 0;
  min-width: 0;
}
#contenido_admin .rossa-profile-config .form-group label,
#contenido_admin .rossa-profile-config__cell > label,
#contenido_admin .rossa-profile-config__field--geo .rossa-profile-config__cell > label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--rossa-ink);
}
#contenido_admin .rossa-profile-config .form-group .campo_texto,
#contenido_admin .rossa-profile-config .form-group select.campo_texto,
#contenido_admin .rossa-profile-config .form-group input[type="text"],
#contenido_admin .rossa-profile-config .form-group input[type="number"],
#contenido_admin .rossa-profile-config .form-group input[type="email"],
#contenido_admin .rossa-profile-config .form-group input[type="password"],
#contenido_admin .rossa-profile-config .form-group select,
#contenido_admin .rossa-profile-config .form-group textarea,
#contenido_admin .rossa-profile-config .form-group .campo_texto,
#contenido_admin .rossa-profile-config .form-group select.campo_texto {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
  font-family: var(--rossa-font);
  font-size: 14px;
  color: var(--rossa-ink);
}
#contenido_admin .rossa-profile-config .form-group input[type="text"],
#contenido_admin .rossa-profile-config .form-group input[type="number"],
#contenido_admin .rossa-profile-config .form-group input[type="email"],
#contenido_admin .rossa-profile-config .form-group input[type="password"],
#contenido_admin .rossa-profile-config .form-group select,
#contenido_admin .rossa-profile-config .form-group .campo_texto,
#contenido_admin .rossa-profile-config .form-group select.campo_texto {
  min-height: 38px;
}
#contenido_admin .rossa-profile-config .form-group textarea {
  min-height: 88px;
  resize: vertical;
}
#contenido_admin .rossa-profile-config .form-group input:focus,
#contenido_admin .rossa-profile-config .form-group select:focus,
#contenido_admin .rossa-profile-config .form-group textarea:focus,
#contenido_admin .rossa-profile-config .form-group .campo_texto:focus {
  outline: none;
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .12);
}
#contenido_admin .rossa-profile-config .form-group:has(> input[type="checkbox"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 12px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-surface-2);
}
#contenido_admin .rossa-profile-config .form-group:has(> input[type="checkbox"]) label {
  flex: 1 1 calc(100% - 28px);
  margin: 0;
  font-weight: 600;
}
#contenido_admin .rossa-profile-config .form-group input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--rossa-teal);
  margin: 0;
}
#contenido_admin .rossa-profile-config .js-apply-automation-folios {
  margin-top: 8px;
  width: auto;
  max-width: 100%;
}
#contenido_admin .rossa-profile-config__apply-automation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
}
#contenido_admin .rossa-profile-config__apply-automation .js-apply-automation-folios {
  margin-top: 0;
}
#contenido_admin .rossa-profile-config__apply-automation .rossa-profile-config__hint {
  margin: 0;
}

/* Nomenclatura + panel de shortcodes (facturación) */
#contenido_admin .rossa-profile-config__field--nomenclatura {
  padding: 16px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-surface-2);
}
#contenido_admin .rossa-profile-config__field--nomenclatura > label {
  margin-bottom: 4px;
}
#contenido_admin .rossa-profile-config__field--nomenclatura > .rossa-profile-config__hint {
  margin: 0 0 12px;
}
#contenido_admin .rossa-profile-config__nomenclatura-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 14px;
  align-items: stretch;
}
#contenido_admin .rossa-profile-config__nomenclatura-input {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#contenido_admin .rossa-profile-config__nomenclatura-compose {
  padding: 10px 12px 12px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
}
#contenido_admin .rossa-profile-config__nomenclatura-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-height: 1.2em;
}
#contenido_admin .rossa-profile-config__next-serial {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rossa-border);
}
#contenido_admin .rossa-profile-config__next-serial-head {
  margin-bottom: 10px;
}
#contenido_admin .rossa-profile-config__next-serial-title {
  display: block;
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--rossa-ink);
}
#contenido_admin .rossa-profile-config .form-group .rossa-profile-config__next-serial-head .rossa-profile-config__hint {
  margin: 0;
}
#contenido_admin .rossa-profile-config__next-serial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
#contenido_admin .rossa-profile-config__next-serial-field {
  min-width: 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
}
#contenido_admin .rossa-profile-config .form-group .rossa-profile-config__next-serial-field label {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--rossa-ink);
}
#contenido_admin .rossa-profile-config .form-group .rossa-profile-config__next-serial input[type="number"] {
  width: 100%;
  max-width: none;
}
#contenido_admin .rossa-profile-config .form-group .rossa-profile-config__next-serial .rossa-profile-config__hint {
  margin: 6px 0 0;
}
#contenido_admin .rossa-profile-config .form-group .rossa-profile-config__next-serial .rossa-profile-config__hint--warn {
  color: var(--rossa-coral);
}
#contenido_admin .rossa-profile-config__nomenclatura-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  letter-spacing: .01em;
}
#contenido_admin .rossa-profile-config .form-group .rossa-profile-config__nomenclatura-compose input.rossa-profile-config__nomenclatura-value {
  width: 100%;
}
#contenido_admin .rossa-profile-config__nomenclatura-tokens-caption {
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--rossa-muted);
}
#contenido_admin .rossa-profile-config__nomenclatura-compose:has([data-nomenclatura-tokens][hidden]) .rossa-profile-config__nomenclatura-tokens-caption {
  display: none;
}
#contenido_admin .rossa-profile-config__nomenclatura-tokens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
#contenido_admin .rossa-profile-config__nomenclatura-tokens[hidden] {
  display: none;
}
#contenido_admin .rossa-profile-config__nomenclatura-token {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 8px 4px 9px;
  border: 1px solid var(--rossa-teal);
  border-radius: var(--rossa-radius-pill);
  background: var(--rossa-tint);
  color: var(--rossa-teal);
  font-family: var(--rossa-font);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#contenido_admin .rossa-profile-config__nomenclatura-token code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  font-weight: 600;
  color: inherit;
  background: transparent;
}
#contenido_admin .rossa-profile-config__nomenclatura-token-x {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: inherit;
  opacity: .7;
}
#contenido_admin .rossa-profile-config__nomenclatura-token:hover,
#contenido_admin .rossa-profile-config__nomenclatura-token:focus-visible {
  background: var(--rossa-salmon);
  border-color: var(--rossa-coral);
  color: var(--rossa-coral);
  outline: none;
}
#contenido_admin .rossa-profile-config__nomenclatura-token-sep {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: var(--rossa-muted);
}
#contenido_admin .rossa-profile-config__nomenclatura-preview {
  margin-top: auto;
  padding: 12px 14px;
  border: 1px solid var(--rossa-border);
  border-left: 3px solid var(--rossa-teal);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
  color: var(--rossa-ink);
}
#contenido_admin .rossa-profile-config__nomenclatura-preview-label {
  display: block;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rossa-muted);
}
#contenido_admin .rossa-profile-config__nomenclatura-preview-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
#contenido_admin .rossa-profile-config__nomenclatura-preview-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
#contenido_admin .rossa-profile-config__nomenclatura-preview-kind {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--rossa-muted);
}
#contenido_admin .rossa-profile-config__nomenclatura-preview-value {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--rossa-teal);
  word-break: break-all;
  background: transparent;
}
#contenido_admin .rossa-profile-config__nomenclatura-preview-unknown {
  color: var(--rossa-coral);
  font-weight: 600;
}
#contenido_admin .rossa-profile-config__shortcodes-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: none;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
  overflow: hidden;
}
#contenido_admin .rossa-profile-config__shortcodes-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--rossa-border);
  background: var(--rossa-white);
}
#contenido_admin .rossa-profile-config__shortcodes-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rossa-muted);
}
#contenido_admin .rossa-profile-config__shortcodes-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--rossa-muted);
}
#contenido_admin .rossa-profile-config__shortcodes-search {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
  font-family: var(--rossa-font);
  font-size: 12px;
  color: var(--rossa-ink);
}
#contenido_admin .rossa-profile-config__shortcodes-search:focus {
  outline: none;
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .12);
}
#contenido_admin .rossa-profile-config__shortcodes-list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  flex: 1 1 auto;
  gap: 6px;
  padding: 10px;
  overflow: auto;
  min-height: 120px;
}
#contenido_admin .rossa-profile-config__shortcode-chip {
  margin: 0;
  padding: 5px 9px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius-pill);
  background: var(--rossa-surface-2);
  color: var(--rossa-ink);
  font-family: var(--rossa-font);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#contenido_admin .rossa-profile-config__shortcode-chip code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  font-weight: 600;
  color: inherit;
  background: transparent;
}
#contenido_admin .rossa-profile-config__shortcode-chip:hover,
#contenido_admin .rossa-profile-config__shortcode-chip:focus-visible {
  background: var(--rossa-tint);
  border-color: var(--rossa-teal);
  color: var(--rossa-teal);
  outline: none;
}
#contenido_admin .rossa-profile-config__shortcode-chip.is-in-use {
  background: var(--rossa-tint);
  border-color: var(--rossa-teal);
  color: var(--rossa-teal);
}
#contenido_admin .rossa-profile-config__shortcode-chip.is-in-use:hover,
#contenido_admin .rossa-profile-config__shortcode-chip.is-in-use:focus-visible {
  background: var(--rossa-salmon);
  border-color: var(--rossa-coral);
  color: var(--rossa-coral);
}
#contenido_admin .rossa-profile-config__shortcode-chip.is-filtered-out {
  display: none;
}
#contenido_admin .rossa-profile-config__shortcodes-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rossa-border);
}
#contenido_admin .rossa-profile-config__shortcodes-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
#contenido_admin .rossa-profile-config__shortcodes-group.is-filtered-out {
  display: none;
}
#contenido_admin .rossa-profile-config__shortcodes-group-title {
  flex: 0 0 100%;
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--rossa-muted);
}
#contenido_admin .rossa-profile-config__shortcodes-req {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--rossa-teal);
}
#contenido_admin .rossa-profile-config__shortcodes-group.is-missing .rossa-profile-config__shortcodes-group-title {
  color: var(--rossa-coral);
}
#contenido_admin .rossa-profile-config__nomenclatura-status {
  margin: 0;
  min-height: 1.2em;
  font-size: 12px;
  color: var(--rossa-muted);
}
#contenido_admin .rossa-profile-config__nomenclatura-status.is-ok {
  color: var(--rossa-green);
}
#contenido_admin .rossa-profile-config__nomenclatura-status.is-error {
  color: var(--rossa-coral);
}
#contenido_admin .rossa-profile-config__nomenclatura-reset {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rossa-cyan);
  font-family: var(--rossa-font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
#contenido_admin .rossa-profile-config__nomenclatura-reset:hover {
  color: var(--rossa-teal);
}
#contenido_admin .rossa-profile-config__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--rossa-border);
}
#contenido_admin .rossa-profile-config__actions .admin_boton {
  min-height: 36px;
  margin: 0;
  padding: 8px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Popup Lydia: scroll interno estable + barra de acciones fija abajo */
html:has(#contenido_admin.isiframe .rossa-profile-config),
html:has(#contenido_admin.isiframe .rossa-profile-config) body,
html:has(#contenido_admin.isiframe .rossa-profile-config) #contenedor_absoluto {
  height: 100%;
  min-height: 100%;
}
html:has(#contenido_admin.isiframe .rossa-profile-config) #contenedor_absoluto {
  padding-top: 0 !important;
  padding-left: 0 !important;
  min-height: 0;
}
#contenido_admin.isiframe:has(.rossa-profile-config) {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  margin-top: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  overflow: hidden;
}
#contenido_admin.isiframe .rossa-profile-config {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  /* Sin padding lateral: el scroll del form queda al borde del modal.
     El margen del contenido va en form/actions. */
  padding: 16px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
}
#contenido_admin.isiframe .rossa-profile-config:has(.rossa-profile-config__nomenclatura-layout) {
  max-width: none;
}
#contenido_admin.isiframe .rossa-profile-config__title {
  display: none;
}
#contenido_admin.isiframe .rossa-profile-config__form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 0 22px 12px;
  box-sizing: border-box;
}
#contenido_admin.isiframe .rossa-profile-config__nomenclatura-layout {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
}
#contenido_admin.isiframe .rossa-profile-config__actions {
  flex: 0 0 auto;
  position: static;
  z-index: 1;
  margin-top: 10px;
  margin-left: 0;
  margin-right: 0;
  padding: 18px 22px 16px;
  border-top: 1px solid var(--rossa-border);
  background: var(--rossa-white);
  box-shadow: none;
  box-sizing: border-box;
  justify-content: center;
}

/* Formularios compactos (si se usan): altura natural + scroll vertical,
   sin cortar el contenido. WuBook ya usa el profilepop estándar. */
html:has(#contenido_admin.isiframe .rossa-profile-config--compact),
html:has(#contenido_admin.isiframe .rossa-profile-config--compact) body,
html:has(#contenido_admin.isiframe .rossa-profile-config--compact) #contenedor_absoluto {
  height: auto !important;
  min-height: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
}
html:has(#contenido_admin.isiframe .rossa-profile-config--compact) #contenedor_absoluto {
  padding-top: 0 !important;
  padding-left: 0 !important;
  display: block;
}
#contenido_admin.isiframe:has(.rossa-profile-config--compact) {
  display: block;
  height: auto !important;
  min-height: 0;
  overflow: visible;
  padding: 0 !important;
}
#contenido_admin.isiframe .rossa-profile-config--compact {
  display: flex;
  flex-direction: column;
  flex: none;
  height: auto;
  min-height: 0;
  padding: 16px 0 0;
  overflow: visible;
}
#contenido_admin.isiframe .rossa-profile-config--compact .rossa-profile-config__form {
  display: block;
  flex: none;
  overflow: visible;
  padding: 0 22px 8px;
  scrollbar-gutter: auto;
}
#contenido_admin.isiframe .rossa-profile-config--compact .rossa-profile-config__actions {
  position: static;
  margin-top: 12px;
  padding: 18px 22px 16px;
  justify-content: center;
}

/* --- Asignación de perfiles (asigProfiles.php) -------------------------- */
#contenido_admin.rossa-profiles-asig {
  font-family: var(--rossa-font);
}
#contenido_admin.rossa-profiles-asig .contenido_admin h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--rossa-teal);
  margin: 0 0 12px;
}
#contenido_admin.rossa-profiles-asig .filter-controls,
#contenido_admin.rossa-profiles-asig .bulk-actions {
  background: var(--rossa-surface-2);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  padding: 14px 16px;
  margin: 16px 0;
  gap: 12px;
  box-shadow: none;
}
#contenido_admin.rossa-profiles-asig .filter-controls label,
#contenido_admin.rossa-profiles-asig .bulk-actions label {
  font-family: var(--rossa-font);
  font-size: 13px;
  font-weight: 700;
  color: var(--rossa-ink);
}
#contenido_admin.rossa-profiles-asig .filter-controls select,
#contenido_admin.rossa-profiles-asig .bulk-actions select {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
  font-family: var(--rossa-font);
  font-size: 13px;
  color: var(--rossa-ink);
  min-width: 200px;
}
#contenido_admin.rossa-profiles-asig .filter-controls select:focus,
#contenido_admin.rossa-profiles-asig .bulk-actions select:focus {
  outline: none;
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .12);
}
#contenido_admin.rossa-profiles-asig .selected-count {
  color: var(--rossa-teal);
  font-size: 13px;
  font-weight: 600;
}
/* Anula el gradiente morado del <style> inline de asigProfiles.php */
#contenido_admin.rossa-profiles-asig #perfiles_fact tr.cab td,
#contenido_admin.rossa-profiles-asig #perfiles_fact .cab td {
  background: var(--rossa-white) !important;
  color: var(--rossa-navy) !important;
  border-top: 1px solid var(--rossa-hairline) !important;
  border-bottom: 1px solid var(--rossa-hairline) !important;
  box-shadow: none;
  padding: 10px 12px;
}
#contenido_admin.rossa-profiles-asig #perfiles_fact {
  box-shadow: none;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
}
#contenido_admin.rossa-profiles-asig #perfiles_fact tbody td {
  padding: 10px 12px;
  vertical-align: middle;
}
#contenido_admin.rossa-profiles-asig #perfiles_fact tbody tr:hover {
  background-color: var(--rossa-tint);
}
#contenido_admin.rossa-profiles-asig #perfiles_fact tbody select {
  max-width: 100%;
  min-width: 200px;
}
#contenido_admin.rossa-profiles-asig .sortable-header {
  cursor: pointer;
  user-select: none;
}
#contenido_admin.rossa-profiles-asig .sortable-header::after {
  color: var(--rossa-muted);
  opacity: .7;
}
#contenido_admin.rossa-profiles-asig tr.row-changed {
  background-color: var(--rossa-salmon) !important;
  border-left: 4px solid var(--rossa-coral);
}
#contenido_admin.rossa-profiles-asig tr.row-changed:hover {
  background-color: #fbe0d8 !important;
}
#contenido_admin.rossa-profiles-asig .checkbox-cell input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--rossa-teal);
  cursor: pointer;
}
#contenido_admin.rossa-profiles-asig .bulk-actions button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  #contenido_admin .rossa-profile-config {
    max-width: none;
    padding: 16px 14px 20px;
    margin: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  #contenido_admin .rossa-profile-config:has(.rossa-profile-config__nomenclatura-layout) {
    max-width: none;
  }
  #contenido_admin .rossa-profile-config__nomenclatura-layout {
    grid-template-columns: 1fr;
  }
  #contenido_admin .rossa-profile-config__next-serial-grid {
    grid-template-columns: 1fr;
  }
  #contenido_admin .rossa-profile-config__shortcodes-panel {
    height: auto;
    max-height: 280px;
  }
  #contenido_admin .rossa-profile-config__field--nomenclatura {
    padding: 12px;
  }
  #contenido_admin .rossa-profile-config__title {
    font-size: 17px;
    margin-bottom: 14px;
    padding-bottom: 10px;
  }
  #contenido_admin.isiframe:has(.rossa-profile-config) {
    padding: 0 !important;
  }
  #contenido_admin.isiframe .rossa-profile-config {
    max-width: none;
    margin: 0;
    padding: 14px 0 0;
  }
  #contenido_admin.isiframe .rossa-profile-config__form {
    padding: 0 16px 12px;
  }
  #contenido_admin.isiframe .rossa-profile-config__actions {
    padding: 14px 16px 12px;
  }
  #contenido_admin.isiframe .rossa-profile-config__nomenclatura-layout {
    grid-template-columns: 1fr;
  }
  #contenido_admin .rossa-profile-config__row--pair,
  #contenido_admin .rossa-profile-config__field--geo .rossa-profile-config__row--pair {
    grid-template-columns: 1fr;
  }
  #contenido_admin .rossa-profile-config__form {
    gap: 16px;
  }
  #contenido_admin .rossa-profile-config__actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
  }
  #contenido_admin .rossa-profile-config__actions .admin_boton {
    width: 100%;
  }
  #contenido_admin .rossa-profiles-table-wrap {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  #contenido_admin .rossa-profiles #perfiles_fact.rossa-profiles-table {
    min-width: 0;
    border-spacing: 0;
  }
  #contenido_admin .rossa-profiles #perfiles_fact tr.cab:first-child td {
    display: block;
    border: 1px solid var(--rossa-border) !important;
    border-radius: var(--rossa-radius);
    margin-bottom: 10px;
    background: var(--rossa-surface-2);
  }
  #contenido_admin .rossa-profiles #perfiles_fact tr.rossa-profiles-table__head {
    display: none;
  }
  #contenido_admin .rossa-profiles #perfiles_fact tbody > tr:not(.cab) {
    display: block;
    margin-bottom: 10px;
    border: 1px solid var(--rossa-border);
    border-radius: var(--rossa-radius);
    background: var(--rossa-white);
    overflow: hidden;
  }
  #contenido_admin .rossa-profiles #perfiles_fact tbody > tr:not(.cab) td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--rossa-hairline-soft);
    text-align: right;
    min-width: 0;
  }
  #contenido_admin .rossa-profiles #perfiles_fact tbody > tr:not(.cab) td:last-child {
    border-bottom: 0;
  }
  #contenido_admin .rossa-profiles #perfiles_fact tbody > tr:not(.cab) td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    max-width: 42%;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rossa-muted);
    text-align: left;
    line-height: 1.35;
    padding-top: 1px;
  }
  #contenido_admin .rossa-profiles #perfiles_fact .rossa-profiles-table__name {
    font-size: 15px;
    color: var(--rossa-navy);
  }
  #contenido_admin .rossa-profiles #perfiles_fact td.rossa-profiles-ops {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px;
    width: auto;
    white-space: normal;
  }
  #contenido_admin .rossa-profiles #perfiles_fact td.rossa-profiles-ops::before {
    margin-bottom: 2px;
  }
  #contenido_admin .rossa-profiles-ops__grid {
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    max-width: none;
    min-width: 0;
    width: 100%;
    margin-left: 0;
  }
  #contenido_admin .rossa-profiles-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  #contenido_admin .rossa-profiles-toolbar > a.admin_boton,
  #contenido_admin .rossa-profiles-toolbar__form .admin_boton {
    width: 100%;
    justify-content: center;
  }
  #contenido_admin .rossa-profiles-toolbar__form {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 700px) {
  #contenido_admin .rossa-profiles-ops__grid {
    grid-template-columns: repeat(auto-fit, minmax(4.75rem, 1fr));
  }
  #contenido_admin.rossa-profiles-asig .filter-controls,
  #contenido_admin.rossa-profiles-asig .bulk-actions {
    flex-direction: column;
    align-items: stretch;
  }
  #contenido_admin.rossa-profiles-asig .filter-controls select,
  #contenido_admin.rossa-profiles-asig .bulk-actions select {
    width: 100%;
    min-width: 0;
  }
}

/*=============================================================================
  37. LYDIA POPUP — authoritative overrides (loads after lydia_popup.css)
  ---------------------------------------------------------------------------
  Beats legacy responsive.css rules on #closepop / icon sizing. Shell styles
  live in admin/css/lydia_popup.css; this block only fixes load-order conflicts.
=============================================================================*/
#lydia_popup #closepop {
  font-size: inherit;
  border-bottom: 1px solid var(--rossa-border);
}
#lydia_popup #cpbuton svg,
#lydia_popup #rpbuton svg,
#lydia_popup #opbuton svg,
#lydia_popup #dpbuton svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 768px) {
  #lydia_popup #cpbuton svg,
  #lydia_popup #rpbuton svg,
  #lydia_popup #opbuton svg,
  #lydia_popup #dpbuton svg {
    width: 18px;
    height: 18px;
  }
}

/* Popup iframe: el <h1> pasa a .lptitle del chrome; sin título en página
   el padding-top deja un hueco vacío innecesario. */
#contenido_admin.isiframe > h1:first-of-type {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  line-height: 0 !important;
}
#contenido_admin.isiframe {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
#contenido_admin.isiframe .fv-page,
#contenido_admin.isiframe .fv-popup {
  padding-top: 8px;
}

/*=============================================================================
  38. SCREEN: Visor de facturas (factVisor.php)
  ---------------------------------------------------------------------------
  Overrides factBillsList.css inside .rossa-fact-visor — flat Rossa surfaces,
  teal actions, airy table, responsive toolbar. Legacy module CSS stays loaded;
  rossa.css wins via load order + scoped specificity.
=============================================================================*/
#contenido_admin .rossa-fact-visor {
  font-family: var(--rossa-font);
  color: var(--rossa-ink);
  max-width: 100%;
}
#contenido_admin .rossa-fact-visor .fact-bills-container {
  font-family: inherit;
  color: inherit;
}

/* --- Toolbar: búsqueda + acciones --------------------------------------- */
#contenido_admin .rossa-fact-visor .fact-bills-header {
  margin-bottom: 14px;
}
#contenido_admin .rossa-fact-visor .fact-bills-search-box {
  background: var(--rossa-white);
  padding: 10px 12px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-shadow: none;
}
#contenido_admin .rossa-fact-visor .fact-search-form {
  display: block;
  margin: 0;
}
#contenido_admin .rossa-fact-visor .fact-search-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

/*=============================================================================
  31. VER RESERVA — REWORK (rama booking-view-redesign-v2)
  ---------------------------------------------------------------------------
  Lienzo plano de una columna: cabecera-resumen siempre visible + tabbar
  (§25) + panel plano por pestaña con patrón de sección. Todo namespaced .vr-*
  (no choca con legacy), construido sobre los tokens de rossa.css. Las acciones
  siguen la jerarquía (primaria teal / secundaria outline / destructiva salmón).
=============================================================================*/

/* --- Breadcrumb + cabecera-resumen de la reserva (NIVEL 1) --------------- */
body.rossa-tabs-on .vr-summary__breadcrumb {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  max-width: none;
  margin: 2px 0 12px;
  font: 700 12px/1 var(--rossa-font);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--rossa-muted);
  text-decoration: none !important;
}
body.rossa-tabs-on .vr-summary__breadcrumb:hover { color: var(--rossa-teal); }
body.rossa-tabs-on .vr-summary__breadcrumb i { font-size: 11px; }

.vr-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 0 0 18px;
  padding: 16px 22px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: 12px;
}
.vr-summary__id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vr-summary__loc {
  font: 700 17px/1.1 var(--rossa-font);
  color: var(--rossa-navy);
  letter-spacing: .01em;
}
.vr-summary__client {
  font: 400 14px/1.2 var(--rossa-font);
  color: var(--rossa-cyan);
  text-decoration: none;
}
.vr-summary__client:hover { text-decoration: underline; }
.vr-summary__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 30px; }
.vr-summary__pair {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 30px;
  border-left: 1px solid var(--rossa-border);
}
.vr-summary__meta .vr-summary__pair:first-child { padding-left: 0; border-left: 0; }
.vr-summary__plabel {
  font: 700 10.5px/1 var(--rossa-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rossa-muted);
}
.vr-summary__pvalue { font: 400 14px/1.2 var(--rossa-font); color: var(--rossa-ink); white-space: nowrap; }
.vr-summary__pvalue b { font-weight: 700; }
.vr-summary__badges { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* Badges de estado del header */
body.rossa-tabs-on .vr-summary__badges .rossa-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  padding: 5px 12px 5px 11px;
  background-color: var(--rossa-surface-2);
  color: var(--rossa-muted);
  border: 1px solid var(--rossa-border);
}
body.rossa-tabs-on .vr-summary__badges .rossa-tag::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
/* Confirmada */
body.rossa-tabs-on .vr-summary__badges .rossa-tag--teal {
  background-color: rgba(0, 94, 102, .09);
  color: var(--rossa-teal);
  border-color: rgba(0, 94, 102, .22);
}
/* Pagado / positivo */
body.rossa-tabs-on .vr-summary__badges .rossa-tag--green {
  background-color: rgba(25, 172, 138, .12);
  color: var(--rossa-green);
  border-color: rgba(25, 172, 138, .30);
}
/* Aviso de pago (No pagado / Pendiente / Falta pago): coral SUAVE,
   mismo tono que el hover del botón de cancelar reserva. */
body.rossa-tabs-on .vr-summary__badges .rossa-tag--coral {
  background-color: rgba(234, 92, 54, .12);
  color: var(--rossa-coral);
  border-color: rgba(234, 92, 54, .30);
}
/* Cancelada */
body.rossa-tabs-on .vr-summary__badges .rossa-tag--red {
  background-color: rgba(231, 0, 76, .09);
  color: var(--rossa-red);
  border-color: rgba(231, 0, 76, .24);
}
/* Pago en recepción / estado neutro */
body.rossa-tabs-on .vr-summary__badges .rossa-tag--soft {
  background-color: var(--rossa-surface-2);
  color: var(--rossa-muted);
  border-color: var(--rossa-border);
}

/* --- Panel plano por pestaña (NIVEL 3) + patrón de sección -------------- */
/* Reaprovecha el contenedor legacy .rossa-ctr-block (ya aplanado por §30);
   .vr-panel es para markup nuevo (la cabecera-resumen vive fuera de él). */
body.rossa-tabs-on .vr-panel { width: 100%; max-width: none; margin: 0; }
body.rossa-tabs-on .vr-panel--wide { max-width: none; }

body.rossa-tabs-on .vr-section {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 16px;
  padding: 0;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: 10px;
  overflow: hidden;
}
body.rossa-tabs-on .vr-section:last-child { margin-bottom: 0; }
/* cabecera en barra tintada (estilo "permisos" del editor de usuarios) */
body.rossa-tabs-on .vr-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  margin: 0;
  background: var(--rossa-surface-2);
  border-bottom: 1px solid var(--rossa-border);
}
/* cuerpo del panel con su padding */
body.rossa-tabs-on .vr-section > .vr-kv,
body.rossa-tabs-on .vr-section > .vr-section__body { padding: 18px 20px; }
body.rossa-tabs-on .vr-section__title {
  margin: 0;
  font: 700 13px/1.2 var(--rossa-font);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rossa-teal);
}
body.rossa-tabs-on .vr-section__title i { margin-right: 8px; font-size: 12px; }
body.rossa-tabs-on .vr-section__aside { font: 400 12px/1.2 var(--rossa-font); color: var(--rossa-muted); }

/* Rejilla etiqueta/valor */
body.rossa-tabs-on .vr-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px 28px;
  width: 100%;
}
body.rossa-tabs-on .vr-kv__cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.rossa-tabs-on .vr-kv__label {
  font: 700 10.5px/1 var(--rossa-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rossa-muted);
}
body.rossa-tabs-on .vr-kv__value { font: 400 14px/1.45 var(--rossa-font); color: var(--rossa-ink); }
body.rossa-tabs-on .vr-kv__value a { color: var(--rossa-cyan); text-decoration: none; }
body.rossa-tabs-on .vr-kv__value a:hover { text-decoration: underline; }

/* Fila de acciones al pie de sección */
body.rossa-tabs-on .vr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
#contenido_admin .rossa-fact-visor .fact-search-toolbar__query {
  flex: 1 1 260px;
  min-width: 0;
}
#contenido_admin .rossa-fact-visor .fact-search-input-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0;
}
#contenido_admin .rossa-fact-visor .fact-search-input-wrapper input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 34px;
  min-height: 0;
  padding: 0 11px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-shadow: none;
  font-family: var(--rossa-font);
  font-size: 13px;
  line-height: 1.2;
  color: var(--rossa-ink);
  background: var(--rossa-white);
  box-sizing: border-box;
}
#contenido_admin .rossa-fact-visor .fact-search-input-wrapper input:hover,
#contenido_admin .rossa-fact-visor .fact-search-input-wrapper input:focus {
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .12);
}
#contenido_admin .rossa-fact-visor .fact-search-input-wrapper .fact-search-btn {
  flex: 0 0 auto;
  height: 34px;
  min-height: 0;
  padding: 0 12px;
  white-space: nowrap;
}
#contenido_admin .rossa-fact-visor .fact-search-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
#contenido_admin .rossa-fact-visor .fact-create-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
#contenido_admin .rossa-fact-visor .rossa-button,
#contenido_admin .rossa-fact-visor .fact-search-btn,
#contenido_admin .rossa-fact-visor .fact-clear-btn,
#contenido_admin .rossa-fact-visor .fact-create-btn,
#contenido_admin .rossa-fact-visor .fact-create-draft-btn,
#contenido_admin .rossa-fact-visor .fact-filters-toggle-btn,
#contenido_admin .rossa-fact-visor .fact-filter-apply-btn,
#contenido_admin .rossa-fact-visor .fact-filter-clear-btn,
#contenido_admin .rossa-fact-visor .fact-bulk-download-btn,
#contenido_admin .rossa-fact-visor .fact-bulk-cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  min-height: 0;
  padding: 0 12px;
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  box-sizing: border-box;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#contenido_admin .rossa-fact-visor .fact-search-btn,
#contenido_admin .rossa-fact-visor .fact-create-btn,
#contenido_admin .rossa-fact-visor .fact-filter-apply-btn,
#contenido_admin .rossa-fact-visor .fact-bulk-download-btn {
  background: var(--rossa-teal);
  border: 1px solid var(--rossa-teal);
  color: var(--rossa-white);
}
#contenido_admin .rossa-fact-visor .fact-search-btn:hover,
#contenido_admin .rossa-fact-visor .fact-create-btn:hover,
#contenido_admin .rossa-fact-visor .fact-filter-apply-btn:hover,
#contenido_admin .rossa-fact-visor .fact-bulk-download-btn:hover {
  background: #00474d;
  border-color: #00474d;
  color: var(--rossa-white);
}
#contenido_admin .rossa-fact-visor .fact-create-draft-btn,
#contenido_admin .rossa-fact-visor .rossa-button--white,
#contenido_admin .rossa-fact-visor .fact-clear-btn,
#contenido_admin .rossa-fact-visor .fact-filters-toggle-btn,
#contenido_admin .rossa-fact-visor .fact-filter-clear-btn,
#contenido_admin .rossa-fact-visor .fact-bulk-cancel-btn {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  color: var(--rossa-ink);
}
#contenido_admin .rossa-fact-visor .fact-create-draft-btn:hover,
#contenido_admin .rossa-fact-visor .rossa-button--white:hover,
#contenido_admin .rossa-fact-visor .fact-clear-btn:hover,
#contenido_admin .rossa-fact-visor .fact-filters-toggle-btn:hover,
#contenido_admin .rossa-fact-visor .fact-filter-clear-btn:hover,
#contenido_admin .rossa-fact-visor .fact-bulk-cancel-btn:hover {
  background: var(--rossa-tint);
  border-color: var(--rossa-teal);
  color: var(--rossa-teal);
}

/* --- Filtros avanzados -------------------------------------------------- */
#contenido_admin .rossa-fact-visor .fact-filters-toggle-wrapper {
  margin-top: 8px;
}
#contenido_admin .rossa-fact-visor .fact-filters-panel {
  margin: 12px 0 16px;
  padding: 16px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-shadow: none;
}
#contenido_admin .rossa-fact-visor .fact-filters-grid {
  gap: 12px 16px;
  margin-bottom: 16px;
}
#contenido_admin .rossa-fact-visor .fact-filter-group label {
  font-size: 12px;
  font-weight: 700;
  color: var(--rossa-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
#contenido_admin .rossa-fact-visor .fact-filter-group label i {
  color: var(--rossa-teal);
}
#contenido_admin .rossa-fact-visor .fact-filter-select,
#contenido_admin .rossa-fact-visor .fact-filter-input {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  font-size: 14px;
  color: var(--rossa-ink);
  background: var(--rossa-white);
  box-shadow: none;
}
#contenido_admin .rossa-fact-visor .fact-filter-select:focus,
#contenido_admin .rossa-fact-visor .fact-filter-input:focus {
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .12);
}
#contenido_admin .rossa-fact-visor .fact-filters-actions {
  border-top: 1px solid var(--rossa-border);
  padding-top: 14px;
  gap: 8px;
}

/* --- Avisos y selección masiva ------------------------------------------ */
#contenido_admin .rossa-fact-visor .fact-search-info {
  background: var(--rossa-tint);
  border: 1px solid var(--rossa-border);
  border-left: 4px solid var(--rossa-teal);
  border-radius: var(--rossa-radius);
  box-shadow: none;
  color: var(--rossa-ink);
  font-size: 13px;
  margin-bottom: 14px;
}
#contenido_admin .rossa-fact-visor .fact-search-info i,
#contenido_admin .rossa-fact-visor .fact-search-info strong {
  color: var(--rossa-teal);
}
#contenido_admin .rossa-fact-visor .fact-bulk-actions {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--rossa-tint);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-shadow: none;
}
#contenido_admin .rossa-fact-visor .fact-bulk-info {
  color: var(--rossa-ink);
  font-size: 13px;
  font-weight: 600;
}
#contenido_admin .rossa-fact-visor .fact-bulk-info i {
  color: var(--rossa-teal);
}

/* --- Cabecera de tabla + listado ---------------------------------------- */
#contenido_admin .rossa-fact-visor .rossa-fact-list {
  margin-top: 4px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
  overflow: hidden;
}
#contenido_admin .rossa-fact-visor .rossa-fact-list .fact-table-header {
  padding: 12px 14px;
  background: var(--rossa-white);
  border: 0;
  border-bottom: 1px solid var(--rossa-border);
  border-radius: 0;
  box-shadow: none;
}
#contenido_admin .rossa-fact-visor .rossa-fact-list .fact-bills-table-wrapper {
  background: var(--rossa-white);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#contenido_admin .rossa-fact-visor .rossa-fact-list .fact-pagination {
  padding: 12px 14px;
  background: var(--rossa-white);
  border: 0;
  border-top: 1px solid var(--rossa-border);
  border-radius: 0;
  box-shadow: none;
}
#contenido_admin .rossa-fact-visor .fact-table-header-info h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--rossa-navy);
  gap: 8px;
}
#contenido_admin .rossa-fact-visor .fact-table-header-info h3 i {
  color: var(--rossa-teal);
}
#contenido_admin .rossa-fact-visor .fact-table-subtitle {
  font-size: 12px;
  color: var(--rossa-muted);
}
#contenido_admin .rossa-fact-visor .fact-table-header-controls label {
  font-size: 12px;
  font-weight: 700;
  color: var(--rossa-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
#contenido_admin .rossa-fact-visor .fact-per-page-select {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  font-size: 13px;
  color: var(--rossa-ink);
  background: var(--rossa-white);
  box-shadow: none;
}

/* Tabla — specificity busters vs factBillsList.css (!important en thead) */
#contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table {
  width: 100% !important;
  min-width: 1080px;
  margin: 0 !important;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: var(--rossa-font);
  font-size: 13px;
  background: var(--rossa-white);
  color: var(--rossa-ink);
}
#contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table thead {
  background: var(--rossa-white) !important;
  color: var(--rossa-muted) !important;
  position: sticky;
  top: 0;
  z-index: 2;
}
#contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table thead th {
  padding: 10px 8px !important;
  border-bottom: 1px solid var(--rossa-border) !important;
  border-radius: 0 !important;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--rossa-muted) !important;
  white-space: nowrap;
  background: var(--rossa-white) !important;
}
#contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table .fact-th-link,
#contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table .fact-th-content i,
#contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table .fact-th-content span {
  color: var(--rossa-muted) !important;
}
#contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table thead .fact-th-content > i.fa {
  display: none;
}
#contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table .fact-sort-icon {
  margin-left: 4px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--rossa-muted) !important;
  font-size: 12px;
  opacity: .65;
}
#contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table .fact-sort-icon.fact-sort-active {
  color: var(--rossa-teal) !important;
  opacity: 1;
}
#contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table tbody tr {
  background: var(--rossa-white) !important;
  border-bottom: 1px solid var(--rossa-hairline-soft);
  transition: background-color .12s ease;
  animation: none !important;
}
#contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table tbody tr:nth-child(even) {
  background: var(--rossa-white) !important;
}
#contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table tbody tr:hover {
  background: var(--rossa-tint) !important;
  box-shadow: none !important;
  border-left: 0 !important;
}
#contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table td {
  padding: 10px 8px;
  vertical-align: middle;
  border: 0;
}
#contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table .fact-bill-id a.admin_link {
  color: var(--rossa-cyan);
  font-weight: 600;
  text-decoration: none;
}
#contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table .fact-bill-id a.admin_link:hover {
  text-decoration: underline;
}
#contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table .fact-bill-serial,
#contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table .fact-bill-identifier {
  font-family: var(--rossa-font);
  font-size: 12px;
  color: var(--rossa-ink);
}
#contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table .fact-bill-client {
  color: var(--rossa-ink);
  font-weight: 500;
}
#contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table .fact-bill-total {
  font-weight: 700;
  color: var(--rossa-green);
  white-space: nowrap;
}
#contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--rossa-teal);
  cursor: pointer;
}

/* Badges */
#contenido_admin .rossa-fact-visor .fact-badge {
  padding: 4px 10px;
  border-radius: var(--rossa-radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  box-shadow: none;
  border: 1px solid transparent;
}
#contenido_admin .rossa-fact-visor .fact-badge-status-pending {
  background: #fff8e6;
  color: #9a6b00;
  border-color: #f0d78c;
}
#contenido_admin .rossa-fact-visor .fact-badge-status-sent {
  background: var(--rossa-tint);
  color: var(--rossa-teal);
  border-color: rgba(0, 94, 102, .2);
}
#contenido_admin .rossa-fact-visor .fact-badge-status-error {
  background: var(--rossa-salmon);
  color: var(--rossa-coral);
  border-color: rgba(234, 92, 54, .25);
}
#contenido_admin .rossa-fact-visor .fact-badge-status-success {
  background: #e8f7f2;
  color: var(--rossa-green);
  border-color: rgba(25, 172, 138, .25);
}
#contenido_admin .rossa-fact-visor .fact-badge-emission-draft {
  background: #f3eef8;
  color: #6b4f8a;
  border-color: #ddd0ea;
}
#contenido_admin .rossa-fact-visor .fact-badge-emission-provisional {
  background: #fff3ec;
  color: var(--rossa-coral);
  border-color: rgba(234, 92, 54, .2);
}
#contenido_admin .rossa-fact-visor .fact-badge-emission-confirmed {
  background: #e8f7f2;
  color: var(--rossa-green);
  border-color: rgba(25, 172, 138, .25);
}
#contenido_admin .rossa-fact-visor .fact-badge-type-default,
#contenido_admin .rossa-fact-visor .fact-badge-type-normal {
  background: var(--rossa-tint);
  color: var(--rossa-teal);
  border-color: rgba(0, 94, 102, .2);
}
#contenido_admin .rossa-fact-visor .fact-badge-type-legacy,
#contenido_admin .rossa-fact-visor .fact-badge-type-simplified {
  background: var(--rossa-surface-2);
  color: var(--rossa-muted);
  border-color: var(--rossa-border);
}
#contenido_admin .rossa-fact-visor .fact-badge-status-aborted,
#contenido_admin .rossa-fact-visor .fact-badge-status-cancelled {
  background: var(--rossa-surface-2);
  color: var(--rossa-muted);
  border-color: var(--rossa-border);
}
#contenido_admin .rossa-fact-visor .fact-badge-status-not_required {
  background: var(--rossa-surface-2);
  color: var(--rossa-muted);
  border-color: var(--rossa-border);
}

#contenido_admin .rossa-fact-visor .fact-badge-type-rectificative {
  background: #fff3ec;
  color: var(--rossa-coral);
  border-color: rgba(234, 92, 54, .2);
}

/* Acciones por fila — anula colores legacy de factBillsList.css */
#contenido_admin .rossa-fact-visor .fact-bill-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
  min-width: 168px;
}
#contenido_admin .rossa-fact-visor .fact-action-btn,
#contenido_admin .rossa-fact-visor a.fact-action-btn,
#contenido_admin .rossa-fact-visor button.fact-action-btn,
#contenido_admin .rossa-fact-visor span.fact-action-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--rossa-border) !important;
  border-radius: var(--rossa-radius) !important;
  background: var(--rossa-white) !important;
  color: var(--rossa-muted) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#contenido_admin .rossa-fact-visor .fact-action-btn:hover:not(.fact-action-btn-disabled) {
  background: var(--rossa-tint) !important;
  border-color: var(--rossa-teal) !important;
  color: var(--rossa-teal) !important;
}
#contenido_admin .rossa-fact-visor .fact-action-info:hover:not(.fact-action-btn-disabled) {
  color: var(--rossa-cyan) !important;
  border-color: var(--rossa-cyan) !important;
}
#contenido_admin .rossa-fact-visor .fact-action-success:hover:not(.fact-action-btn-disabled),
#contenido_admin .rossa-fact-visor .fact-action-download:hover:not(.fact-action-btn-disabled) {
  color: var(--rossa-green) !important;
  border-color: var(--rossa-green) !important;
}
#contenido_admin .rossa-fact-visor .fact-action-warning:hover:not(.fact-action-btn-disabled) {
  color: var(--rossa-coral) !important;
  border-color: var(--rossa-coral) !important;
}
#contenido_admin .rossa-fact-visor .fact-action-btn-disabled,
#contenido_admin .rossa-fact-visor .fact-action-success.fact-action-btn-disabled,
#contenido_admin .rossa-fact-visor .fact-action-warning.fact-action-btn-disabled {
  opacity: .4 !important;
  background: var(--rossa-surface-2) !important;
  border-color: var(--rossa-border) !important;
  color: var(--rossa-muted) !important;
}
#contenido_admin .rossa-fact-visor .fact-action-btn i {
  font-size: 13px;
}

/* Reservas vinculadas */
#contenido_admin .rossa-fact-visor .fact-booking-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  margin: 0 4px 4px 0;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius-pill);
  background: var(--rossa-white);
  color: var(--rossa-cyan);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
  transform: none;
}
#contenido_admin .rossa-fact-visor .fact-booking-badge:hover {
  background: var(--rossa-tint);
  border-color: var(--rossa-teal);
  color: var(--rossa-teal);
  text-decoration: none;
}
#contenido_admin .rossa-fact-visor .fact-booking-more {
  font-size: 11px;
  color: var(--rossa-muted);
  font-weight: 600;
}

/* Paginación y vacío */
#contenido_admin .rossa-fact-visor .rossa-fact-list + .fact-pagination,
#contenido_admin .rossa-fact-visor .fact-bills-empty {
  margin: 0;
}
#contenido_admin .rossa-fact-visor .rossa-fact-list .fact-bills-empty {
  border: 0;
  border-radius: 0;
}
#contenido_admin .rossa-fact-visor .fact-pagination-info {
  font-size: 13px;
  color: var(--rossa-muted);
  font-weight: 600;
}
#contenido_admin .rossa-fact-visor .fact-page-btn {
  min-width: 34px;
  height: 34px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
  color: var(--rossa-ink);
  font-family: var(--rossa-font);
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}
#contenido_admin .rossa-fact-visor .fact-page-btn:hover,
#contenido_admin .rossa-fact-visor .fact-page-btn.fact-page-btn-active {
  background: var(--rossa-teal);
  border-color: var(--rossa-teal);
  color: var(--rossa-white);
}
#contenido_admin .rossa-fact-visor .fact-bills-empty {
  padding: 56px 20px;
  background: var(--rossa-white);
  border: 1px dashed var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-shadow: none;
}
#contenido_admin .rossa-fact-visor .fact-bills-empty-icon {
  color: var(--rossa-border);
}
#contenido_admin .rossa-fact-visor .fact-bills-empty h3 {
  font-size: 18px;
  color: var(--rossa-navy);
}
#contenido_admin .rossa-fact-visor .fact-bills-empty p {
  color: var(--rossa-muted);
  font-size: 14px;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  #contenido_admin .rossa-fact-visor .fact-search-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  #contenido_admin .rossa-fact-visor .fact-search-toolbar__query,
  #contenido_admin .rossa-fact-visor .fact-search-toolbar__actions {
    flex: 1 1 auto;
    width: 100%;
  }
  #contenido_admin .rossa-fact-visor .fact-search-toolbar__actions {
    justify-content: flex-start;
  }
}
@media (max-width: 992px) {
  #contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table {
    min-width: 960px;
  }
}
@media (max-width: 768px) {
  #contenido_admin .rossa-fact-visor .rossa-fact-list__scroll {
    overflow-x: visible;
    padding: 10px;
  }
  #contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table {
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0 10px;
  }
  #contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table thead {
    display: none;
  }
  #contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table tbody {
    display: block;
  }
  #contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table tbody tr.fact-bill-row {
    display: block;
    padding: 12px;
    border: 1px solid var(--rossa-border) !important;
    border-radius: var(--rossa-radius) !important;
    background: var(--rossa-white) !important;
    box-shadow: none !important;
  }
  #contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table tbody tr.fact-bill-row:hover {
    background: var(--rossa-white) !important;
  }
  #contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table tbody td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 7px 0;
    border: 0;
    text-align: right;
  }
  #contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 42%;
    max-width: 42%;
    padding-top: 2px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--rossa-muted);
    text-align: left;
    line-height: 1.35;
  }
  #contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table tbody td.fact-bill-check {
    justify-content: flex-start;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--rossa-hairline-soft);
    margin-bottom: 4px;
  }
  #contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table tbody td.fact-bill-check::before {
    content: none;
  }
  #contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table tbody td.fact-bill-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--rossa-hairline-soft);
  }
  #contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table tbody td.fact-bill-actions::before {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 6px;
  }
  #contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table td.fact-bill-actions {
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
  }
  #contenido_admin .rossa-fact-visor .fact-bills-table.rossa-fact-bills-table td.fact-bill-bookings {
    flex-wrap: wrap;
  }
  #contenido_admin .rossa-fact-visor .fact-table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  #contenido_admin .rossa-fact-visor .fact-table-header-controls {
    width: 100%;
    justify-content: space-between;
  }
  #contenido_admin .rossa-fact-visor .fact-bulk-content {
    flex-direction: column;
    align-items: stretch;
  }
  #contenido_admin .rossa-fact-visor .fact-bulk-buttons {
    width: 100%;
    flex-direction: column;
  }
  #contenido_admin .rossa-fact-visor .fact-bulk-buttons .rossa-button {
    width: 100%;
    justify-content: center;
  }
  #contenido_admin .rossa-fact-visor .fact-filters-actions {
    flex-direction: column;
  }
  #contenido_admin .rossa-fact-visor .fact-filter-apply-btn,
  #contenido_admin .rossa-fact-visor .fact-filter-clear-btn {
    width: 100%;
    justify-content: center;
  }
  #contenido_admin .rossa-fact-visor .fact-pagination {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  #contenido_admin .rossa-fact-visor .fact-pagination-buttons {
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media (max-width: 640px) {
  #contenido_admin .rossa-fact-visor .fact-bills-search-box {
    padding: 10px;
  }
  #contenido_admin .rossa-fact-visor .fact-search-input-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  #contenido_admin .rossa-fact-visor .fact-search-input-wrapper input,
  #contenido_admin .rossa-fact-visor .fact-search-input-wrapper .fact-search-btn {
    width: 100%;
    height: 36px;
  }
  #contenido_admin .rossa-fact-visor .fact-search-toolbar__actions,
  #contenido_admin .rossa-fact-visor .fact-create-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  #contenido_admin .rossa-fact-visor .fact-search-toolbar__actions .rossa-button,
  #contenido_admin .rossa-fact-visor .fact-search-toolbar__actions .fact-clear-btn,
  #contenido_admin .rossa-fact-visor .fact-create-buttons .rossa-button {
    width: 100%;
    height: 36px;
    justify-content: center;
  }
  #contenido_admin .rossa-fact-visor .fact-filters-toggle-btn {
    width: 100%;
    height: 36px;
    justify-content: center;
  }
}

/*=============================================================================
  38b. SCREEN: Detalle de factura (billVisor.php)
  ---------------------------------------------------------------------------
  Overrides factBillView.css inside .rossa-fact-bill-visor — paneles planos,
  tabla airy, botones Rossa, badges con tokens. Legacy module CSS stays loaded.
=============================================================================*/
#contenido_admin .rossa-fact-bill-visor {
  font-family: var(--rossa-font);
  color: var(--rossa-ink);
  max-width: 100%;
}

#contenido_admin .rossa-fact-bill-visor .fact-bill-view-container {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* --- Cabecera: título + acciones ---------------------------------------- */
#contenido_admin .rossa-fact-bill-visor .fact-bill-view-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 16px;
  margin-bottom: 16px;
  padding: 16px 18px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  border-bottom: 1px solid var(--rossa-border);
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-view-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  min-width: 0;
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-view-title h2 {
  margin: 0;
  font-family: var(--rossa-font);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--rossa-ink);
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-view-title h2 i {
  margin-right: 8px;
  color: var(--rossa-teal);
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-id-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: var(--rossa-radius-pill);
  background: var(--rossa-teal);
  color: var(--rossa-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-view-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

/* Editor de folio — ritmo vertical y paneles */
#contenido_admin .rossa-fact-bill-visor .folio-editor-container {
  max-width: 960px;
  margin: 0 auto 8px;
}

#contenido_admin .rossa-fact-bill-visor .folio-editor-container .fact-bill-view-header {
  margin-bottom: 24px;
}

#contenido_admin .rossa-fact-bill-visor .folio-editor-container .wizard-section {
  min-height: auto;
  margin-bottom: 24px;
  padding: 20px 22px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-shadow: none;
}

#contenido_admin .rossa-fact-bill-visor .folio-editor-container .wizard-section:last-child {
  margin-bottom: 0;
}

#contenido_admin .rossa-fact-bill-visor .folio-editor-container .folio-editor-meta {
  padding: 16px 20px;
}

#contenido_admin .rossa-fact-bill-visor .folio-editor-container .main-toolbar {
  margin-bottom: 18px;
}

#contenido_admin .rossa-fact-bill-visor .folio-editor-container .items-container {
  margin-bottom: 18px;
}

#contenido_admin .rossa-fact-bill-visor .folio-editor-container .folio-editor-section-title,
#contenido_admin .rossa-fact-bill-visor .folio-editor-container .wizard-section > h3 {
  margin: 0 0 16px;
  font-family: var(--rossa-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--rossa-ink);
}

#contenido_admin .rossa-fact-bill-visor .folio-editor-container .main-toolbar .folio-editor-section-title {
  margin-bottom: 0;
}

#contenido_admin .rossa-fact-bill-visor .folio-editor-container .section-summary .summary-row {
  padding: 6px 14px;
}

#contenido_admin .rossa-fact-bill-visor .folio-editor-container .section-summary .summary-row.total {
  padding: 10px 14px;
}

#contenido_admin .rossa-fact-bill-visor .folio-editor-container .form-group label {
  margin-bottom: 10px;
  color: var(--rossa-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Botones de acción */
#contenido_admin .rossa-fact-bill-visor .fact-bill-view-btn {
  margin: 0;
  height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  transform: none;
  box-shadow: none;
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-view-btn:hover {
  transform: none;
  box-shadow: none;
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-view-btn-primary {
  background: var(--rossa-teal);
  border-color: var(--rossa-teal);
  color: var(--rossa-white);
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-view-btn-primary:hover:not(:disabled):not(.fact-bill-view-btn-disabled) {
  background: #00474d;
  border-color: #00474d;
  color: var(--rossa-white);
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-view-btn-success {
  background: var(--rossa-white);
  border-color: var(--rossa-border);
  color: var(--rossa-ink);
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-view-btn-success:hover:not(:disabled):not(.fact-bill-view-btn-disabled) {
  background: var(--rossa-white);
  border-color: var(--rossa-teal);
  color: var(--rossa-teal);
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-view-btn-warning {
  background: var(--rossa-salmon);
  border-color: var(--rossa-salmon);
  color: var(--rossa-coral);
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-view-btn-warning:hover:not(:disabled):not(.fact-bill-view-btn-disabled) {
  background: #fbe0d8;
  border-color: #fbe0d8;
  color: var(--rossa-coral);
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-view-btn-disabled,
#contenido_admin .rossa-fact-bill-visor .fact-bill-view-btn:disabled {
  opacity: 1;
  cursor: not-allowed !important;
  background: #f2f4f5 !important;
  border-color: var(--rossa-border) !important;
  color: var(--rossa-muted) !important;
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-view-btn-disabled:hover,
#contenido_admin .rossa-fact-bill-visor .fact-bill-view-btn:disabled:hover {
  background: #f2f4f5 !important;
  border-color: var(--rossa-border) !important;
  color: var(--rossa-muted) !important;
}

/* --- Secciones ---------------------------------------------------------- */
#contenido_admin .rossa-fact-bill-visor .fact-bill-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-section {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  padding: 16px 18px;
  box-shadow: none;
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-section.full-width {
  grid-column: 1 / -1;
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rossa-border);
  font-family: var(--rossa-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--rossa-ink);
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-section-title i {
  color: var(--rossa-teal);
  font-size: 14px;
}

/* --- Campos de información ---------------------------------------------- */
#contenido_admin .rossa-fact-bill-visor .fact-bill-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-info-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--rossa-muted);
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-info-value {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--rossa-ink);
  word-break: break-word;
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-info-value .empty,
#contenido_admin .rossa-fact-bill-visor .fact-bill-info-value span.empty {
  color: var(--rossa-muted);
  font-style: italic;
  font-weight: 400;
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-info-value--total {
  font-size: 18px;
  font-weight: 700;
  color: var(--rossa-green);
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-status-icon--yes {
  color: var(--rossa-green);
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-status-icon--no {
  color: var(--rossa-coral);
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-info-value a.admin_link,
#contenido_admin .rossa-fact-bill-visor .fact-client-reference-btn {
  color: var(--rossa-cyan);
  font-weight: 600;
  text-decoration: none;
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-info-value a.admin_link:hover,
#contenido_admin .rossa-fact-bill-visor .fact-client-reference-btn:hover {
  color: var(--rossa-teal);
  text-decoration: underline;
}

/* --- Badges de estado --------------------------------------------------- */
#contenido_admin .rossa-fact-bill-visor .fact-bill-badge,
#contenido_admin .rossa-fact-bill-visor .fact-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--rossa-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.2;
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-badge-type-DEFAULT,
#contenido_admin .rossa-fact-bill-visor .fact-bill-badge-type-SIMPLIFIED,
#contenido_admin .rossa-fact-bill-visor .fact-bill-badge-status-SENT {
  background: rgba(23, 121, 155, .12);
  color: var(--rossa-cyan);
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-badge-type-RECTIFICATIVE,
#contenido_admin .rossa-fact-bill-visor .fact-bill-badge-status-ERROR {
  background: var(--rossa-salmon);
  color: var(--rossa-coral);
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-badge-type-LEGACY,
#contenido_admin .rossa-fact-bill-visor .fact-bill-badge-status-CANCELLED,
#contenido_admin .rossa-fact-bill-visor .fact-bill-badge-status-ABORTED,
#contenido_admin .rossa-fact-bill-visor .fact-bill-badge-status-NOT_REQUIRED,
#contenido_admin .rossa-fact-bill-visor .fact-bill-badge-emission-LEGACY,
#contenido_admin .rossa-fact-bill-visor .fact-bill-badge-emission-PROVISIONAL {
  background: #f2f4f5;
  color: var(--rossa-muted);
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-badge-status-PENDING,
#contenido_admin .rossa-fact-bill-visor .fact-bill-badge-emission-DRAFT,
#contenido_admin .rossa-fact-bill-visor .fact-badge.fact-badge-status-pending {
  background: #fff4e8;
  color: var(--rossa-coral);
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-badge-status-SUCCESS,
#contenido_admin .rossa-fact-bill-visor .fact-bill-badge-emission-CONFIRMED,
#contenido_admin .rossa-fact-bill-visor .fact-badge.fact-badge-status-success {
  background: rgba(25, 172, 138, .12);
  color: var(--rossa-green);
}

/* --- Tablas (líneas, pagos, documentos) --------------------------------- */
#contenido_admin .rossa-fact-bill-visor .fact-bill-lines-table {
  width: 100%;
  margin-top: 4px;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: var(--rossa-font);
  font-size: 13px;
  color: var(--rossa-ink);
  background: var(--rossa-white);
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-lines-table thead {
  background: var(--rossa-white);
  color: var(--rossa-muted);
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-lines-table th {
  padding: 10px 8px;
  border-bottom: 1px solid var(--rossa-border);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--rossa-muted);
  background: var(--rossa-white);
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-lines-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--rossa-border);
  font-size: 13px;
  vertical-align: middle;
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-lines-table tbody tr:hover {
  background: rgba(0, 94, 102, .03);
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-lines-table .text-right {
  text-align: right;
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-lines-table .text-center {
  text-align: center;
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-total-row {
  background: var(--rossa-white) !important;
  font-weight: 700;
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-total-row td {
  border-top: 1px solid var(--rossa-border);
  border-bottom: 0;
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-pending-row {
  background: var(--rossa-salmon) !important;
}
#contenido_admin .rossa-fact-bill-visor .fact-bill-pending-label,
#contenido_admin .rossa-fact-bill-visor .fact-bill-pending-amount {
  color: var(--rossa-coral);
  font-weight: 700;
}
#contenido_admin .rossa-fact-bill-visor .fact-booking-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--rossa-cyan);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transform: none;
  box-shadow: none;
}
#contenido_admin .rossa-fact-bill-visor .fact-booking-link:hover {
  color: var(--rossa-teal);
  background: transparent;
  text-decoration: underline;
  transform: none;
  box-shadow: none;
}
#contenido_admin .rossa-fact-bill-visor .fact-payment-ref {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  color: var(--rossa-muted);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--rossa-font);
}
#contenido_admin .rossa-fact-bill-visor .fact-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--rossa-radius);
  border: 1px solid var(--rossa-border);
  background: var(--rossa-white);
  color: var(--rossa-teal);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
#contenido_admin .rossa-fact-bill-visor .fact-action-btn:hover {
  border-color: var(--rossa-teal);
  color: var(--rossa-teal);
  background: rgba(0, 94, 102, .04);
}
#contenido_admin .rossa-fact-bill-visor .fact-action-btn.fact-action-btn-disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Comentarios y errores ---------------------------------------------- */
#contenido_admin .rossa-fact-bill-visor .fact-bill-comments {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  padding: 14px 16px;
  min-height: 48px;
  color: var(--rossa-ink);
  font-size: 14px;
  line-height: 1.55;
}
#contenido_admin .rossa-fact-bill-visor .fact-error-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #f0c4b8;
  border-radius: var(--rossa-radius);
  background: var(--rossa-salmon);
  color: var(--rossa-coral);
  font-size: 14px;
  line-height: 1.45;
}
#contenido_admin .rossa-fact-bill-visor .fact-error-message i {
  margin-top: 2px;
  font-size: 18px;
  color: var(--rossa-coral);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  #contenido_admin .rossa-fact-bill-visor .fact-bill-sections,
  #contenido_admin .rossa-fact-bill-visor .fact-bill-info-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  #contenido_admin .rossa-fact-bill-visor .fact-bill-view-header {
    flex-direction: column;
    align-items: flex-start;
  }
  #contenido_admin .rossa-fact-bill-visor .fact-bill-view-actions {
    width: 100%;
  }
  #contenido_admin .rossa-fact-bill-visor .fact-bill-view-btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
  #contenido_admin .rossa-fact-bill-visor .fact-bill-lines-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Pestañas de estado del listado de folios (.fv-filter): la pastilla activa
   es teal + texto blanco; .fv-filter:hover pinta el texto teal y lo oculta. */
#contenido_admin .fv-filter--active,
#contenido_admin .fv-filter--active:hover,
#contenido_admin .fv-filter--active:focus {
  background: var(--rossa-teal);
  border-color: var(--rossa-teal);
  color: var(--rossa-white);
}

/*=============================================================================
  38c. SCREEN: Detalle de cliente facturación (clientVisor.php)
  ---------------------------------------------------------------------------
  Overrides factClientView.css inside .rossa-fact-client-visor — mismo lenguaje
  que billVisor (§38b): paneles planos, teal, badges con tokens Rossa.
=============================================================================*/
#contenido_admin .rossa-fact-client-visor {
  font-family: var(--rossa-font);
  color: var(--rossa-ink);
  max-width: 100%;
}

#contenido_admin .rossa-fact-client-visor .fact-client-view-container {
  max-width: none;
  margin: 0;
  padding: 0;
  font-family: inherit;
  color: inherit;
}

/* --- Cabecera ----------------------------------------------------------- */
#contenido_admin .rossa-fact-client-visor .fact-client-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 16px;
  margin-bottom: 16px;
  padding: 16px 18px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-shadow: none;
  color: var(--rossa-ink);
}
#contenido_admin .rossa-fact-client-visor .fact-client-header i {
  color: inherit;
}
#contenido_admin .rossa-fact-client-visor .fact-client-header-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  min-width: 0;
}
#contenido_admin .rossa-fact-client-visor .fact-client-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  background: rgba(0, 94, 102, .08);
  font-size: 28px;
  line-height: 1;
  color: var(--rossa-teal);
}
#contenido_admin .rossa-fact-client-visor .fact-client-avatar i {
  color: var(--rossa-teal);
}
#contenido_admin .rossa-fact-client-visor .fact-client-title h2 {
  margin: 0 0 8px;
  font-family: var(--rossa-font);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--rossa-ink);
}
#contenido_admin .rossa-fact-client-visor .fact-client-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--rossa-radius-pill);
  background: rgba(0, 94, 102, .08);
  color: var(--rossa-teal);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  backdrop-filter: none;
}
#contenido_admin .rossa-fact-client-visor .fact-client-type-badge i {
  font-size: 12px;
  color: var(--rossa-teal);
}
#contenido_admin .rossa-fact-client-visor .fact-client-header-actions {
  text-align: left;
}
#contenido_admin .rossa-fact-client-visor .fact-client-id {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: var(--rossa-radius-pill);
  background: var(--rossa-teal);
  color: var(--rossa-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  backdrop-filter: none;
}

/* --- Secciones ---------------------------------------------------------- */
#contenido_admin .rossa-fact-client-visor .fact-client-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
#contenido_admin .rossa-fact-client-visor .fact-client-section {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-shadow: none;
  overflow: visible;
  animation: none;
}
#contenido_admin .rossa-fact-client-visor .fact-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 18px 10px;
  background: transparent;
  border-bottom: 1px solid var(--rossa-border);
}
#contenido_admin .rossa-fact-client-visor .fact-section-header i {
  font-size: 14px;
  color: var(--rossa-teal);
}
#contenido_admin .rossa-fact-client-visor .fact-section-header h3 {
  margin: 0;
  font-family: var(--rossa-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--rossa-ink);
}
#contenido_admin .rossa-fact-client-visor .fact-section-content {
  padding: 14px 18px 16px;
}

/* --- Campos ------------------------------------------------------------- */
#contenido_admin .rossa-fact-client-visor .fact-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}
#contenido_admin .rossa-fact-client-visor .fact-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
#contenido_admin .rossa-fact-client-visor .fact-info-item.fact-info-full {
  grid-column: 1 / -1;
}
#contenido_admin .rossa-fact-client-visor .fact-info-item.fact-info-highlight {
  padding: 12px 14px;
  border-radius: var(--rossa-radius);
  border: 1px solid var(--rossa-border);
  background: rgba(0, 94, 102, .04);
}
#contenido_admin .rossa-fact-client-visor .fact-info-item label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--rossa-muted);
}
#contenido_admin .rossa-fact-client-visor .fact-info-item span {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--rossa-ink);
  word-break: break-word;
}
#contenido_admin .rossa-fact-client-visor .fact-document-number {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--rossa-teal) !important;
}
#contenido_admin .rossa-fact-client-visor .fact-document-number i {
  font-size: 16px;
  color: var(--rossa-teal);
}
#contenido_admin .rossa-fact-client-visor .fact-contact-link,
#contenido_admin .rossa-fact-client-visor .fact-client-reference-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rossa-cyan);
  font-weight: 600;
  text-decoration: none;
}
#contenido_admin .rossa-fact-client-visor .fact-contact-link:hover,
#contenido_admin .rossa-fact-client-visor .fact-client-reference-btn:hover {
  color: var(--rossa-teal);
  text-decoration: underline;
}
#contenido_admin .rossa-fact-client-visor .fact-contact-link i {
  font-size: 13px;
}

/* --- Badges de estado --------------------------------------------------- */
#contenido_admin .rossa-fact-client-visor .fact-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--rossa-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
#contenido_admin .rossa-fact-client-visor .fact-status-active {
  background: rgba(25, 172, 138, .12);
  color: var(--rossa-green);
}
#contenido_admin .rossa-fact-client-visor .fact-status-inactive {
  background: var(--rossa-salmon);
  color: var(--rossa-coral);
}
#contenido_admin .rossa-fact-client-visor .fact-status-badge i {
  font-size: 12px;
}

/* --- Errores ------------------------------------------------------------ */
#contenido_admin .rossa-fact-client-visor .fact-error-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #f0c4b8;
  border-left: 1px solid #f0c4b8;
  border-radius: var(--rossa-radius);
  background: var(--rossa-salmon);
  color: var(--rossa-coral);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  box-shadow: none;
}
#contenido_admin .rossa-fact-client-visor .fact-error-message i {
  margin-top: 2px;
  font-size: 18px;
  color: var(--rossa-coral);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
  #contenido_admin .rossa-fact-client-visor .fact-client-sections {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  #contenido_admin .rossa-fact-client-visor .fact-client-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }
  #contenido_admin .rossa-fact-client-visor .fact-client-header-info {
    flex-direction: row;
    align-items: center;
  }
  #contenido_admin .rossa-fact-client-visor .fact-info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #contenido_admin .rossa-fact-client-visor .fact-section-content {
    padding: 12px 14px 14px;
  }
}

/*=============================================================================
  39. SCREEN: Problemas facturación automática (factIssuesVisor.php)
  ---------------------------------------------------------------------------
  Overrides factIssues.css inside .rossa-fact-issues. Grouped pending/resolved
  views, pill tabs, airy table, mobile cards.
=============================================================================*/
#contenido_admin .rossa-fact-issues {
  font-family: var(--rossa-font);
  color: var(--rossa-ink);
  max-width: 100%;
}
#contenido_admin .rossa-fact-issues .fact-issues-container {
  padding: 0;
  max-width: none;
  margin: 0;
}
#contenido_admin .rossa-fact-issues .rossa-fact-issues-intro {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rossa-muted);
  max-width: 820px;
}

/* --- Toolbar: pestañas + resumen ---------------------------------------- */
#contenido_admin .rossa-fact-issues .rossa-fact-issues-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
#contenido_admin .rossa-fact-issues .rossa-fact-issues-view {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--rossa-border);
  border-radius: 0;
  background: transparent;
}
#contenido_admin .rossa-fact-issues .rossa-fact-issues-view__btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-height: 40px;
  padding: 0 4px;
  margin: 0 16px 0 0;
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--rossa-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--rossa-muted);
  text-decoration: none;
  background: transparent;
  transition: color .15s ease, border-color .15s ease;
}
#contenido_admin .rossa-fact-issues .rossa-fact-issues-view__btn:last-child {
  margin-right: 0;
}
#contenido_admin .rossa-fact-issues .rossa-fact-issues-view__btn:hover {
  color: var(--rossa-teal);
  background: transparent;
  text-decoration: none;
}
#contenido_admin .rossa-fact-issues .rossa-fact-issues-view__btn.is-active {
  color: var(--rossa-teal);
  border-bottom-color: var(--rossa-teal);
  background: transparent;
  box-shadow: none;
}
#contenido_admin .rossa-fact-issues .rossa-fact-issues-view__btn.is-active:hover {
  color: var(--rossa-teal);
  background: transparent;
}
#contenido_admin .rossa-fact-issues .rossa-fact-issues-summary__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--rossa-radius);
  font-size: 12px;
  font-weight: 600;
  color: var(--rossa-muted);
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
}
#contenido_admin .rossa-fact-issues .rossa-fact-issues-summary__chip i {
  font-size: 11px;
  opacity: .75;
}
#contenido_admin .rossa-fact-issues .rossa-fact-issues-summary__chip--pending i {
  color: var(--rossa-coral);
}
#contenido_admin .rossa-fact-issues .rossa-fact-issues-summary__chip--resolved i {
  color: var(--rossa-green);
}

/* --- Acciones masivas --------------------------------------------------- */
#contenido_admin .rossa-fact-issues .rossa-fact-issues-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#contenido_admin .rossa-fact-issues .rossa-fact-issues-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
}
#contenido_admin .rossa-fact-issues .rossa-fact-issues-bulk__select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--rossa-ink);
  cursor: pointer;
}
#contenido_admin .rossa-fact-issues .rossa-fact-issues-bulk__select input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--rossa-teal);
}
#contenido_admin .rossa-fact-issues .rossa-button,
#contenido_admin .rossa-fact-issues .rossa-fact-issues-bulk__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  transform: none;
  border: 1px solid var(--rossa-teal);
  background: var(--rossa-teal);
  color: var(--rossa-white);
  cursor: pointer;
  text-decoration: none;
}
#contenido_admin .rossa-fact-issues .rossa-button--success,
#contenido_admin .rossa-fact-issues .rossa-fact-issues-bulk__btn {
  background: var(--rossa-teal);
  border-color: var(--rossa-teal);
}
#contenido_admin .rossa-fact-issues .rossa-button:hover,
#contenido_admin .rossa-fact-issues .rossa-fact-issues-bulk__btn:hover {
  background: #00474d;
  border-color: #00474d;
  color: var(--rossa-white);
  text-decoration: none;
  transform: none;
  box-shadow: none;
}

/* --- Listado ------------------------------------------------------------ */
#contenido_admin .rossa-fact-issues .rossa-fact-issues-list {
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
  overflow: hidden;
}
#contenido_admin .rossa-fact-issues .rossa-fact-issues-list__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#contenido_admin .rossa-fact-issues .fact-issues-table.rossa-fact-issues-table {
  width: 100% !important;
  min-width: 980px;
  margin: 0 !important;
  border-collapse: collapse;
  border-spacing: 0;
  background: var(--rossa-white);
  box-shadow: none !important;
  border-radius: 0;
  overflow: visible;
}
#contenido_admin .rossa-fact-issues .fact-issues-table.rossa-fact-issues-table thead {
  background: var(--rossa-white) !important;
  color: var(--rossa-muted) !important;
}
#contenido_admin .rossa-fact-issues .fact-issues-table.rossa-fact-issues-table thead th {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--rossa-border) !important;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--rossa-muted) !important;
  background: var(--rossa-white) !important;
}
#contenido_admin .rossa-fact-issues .rossa-fact-issues-group__head td {
  padding: 8px 12px !important;
  background: var(--rossa-white) !important;
  border-top: 1px solid var(--rossa-border);
  border-bottom: 1px solid var(--rossa-hairline-soft);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--rossa-muted);
}
#contenido_admin .rossa-fact-issues .rossa-fact-issues-group--pending .rossa-fact-issues-group__head td,
#contenido_admin .rossa-fact-issues .rossa-fact-issues-group--resolved .rossa-fact-issues-group__head td {
  background: var(--rossa-white) !important;
  color: var(--rossa-muted);
  border-color: var(--rossa-hairline-soft);
}
#contenido_admin .rossa-fact-issues .rossa-fact-issues-group--pending .rossa-fact-issues-group__head i {
  color: var(--rossa-coral);
  opacity: .7;
}
#contenido_admin .rossa-fact-issues .rossa-fact-issues-group--resolved .rossa-fact-issues-group__head i {
  color: var(--rossa-green);
  opacity: .7;
}
#contenido_admin .rossa-fact-issues .rossa-fact-issues-group__head i {
  margin-right: 6px;
}
#contenido_admin .rossa-fact-issues .fact-issue-row td {
  padding: 12px;
  vertical-align: top;
  font-size: 13px;
  color: var(--rossa-ink);
  border-bottom: 1px solid var(--rossa-hairline-soft);
}
#contenido_admin .rossa-fact-issues .fact-issue-row--pending td {
  background: var(--rossa-white) !important;
  border-left: 0;
}
#contenido_admin .rossa-fact-issues .fact-issue-row--pending:hover td {
  background: var(--rossa-tint) !important;
}
#contenido_admin .rossa-fact-issues .fact-issue-row--resolved td {
  background: var(--rossa-white) !important;
  border-left: 0;
  color: var(--rossa-muted);
  opacity: 1 !important;
}
#contenido_admin .rossa-fact-issues .fact-issue-row--resolved .fact-issue-id strong,
#contenido_admin .rossa-fact-issues .fact-issue-row--resolved .fact-issue-message {
  color: var(--rossa-muted);
}
#contenido_admin .rossa-fact-issues .fact-issue-row--resolved .admin_link {
  color: var(--rossa-cyan);
}
#contenido_admin .rossa-fact-issues .fact-issue-row--resolved:hover td {
  background: var(--rossa-tint) !important;
}
#contenido_admin .rossa-fact-issues .fact-issue-row .admin_link {
  color: var(--rossa-cyan);
  font-weight: 600;
  text-decoration: none;
}
#contenido_admin .rossa-fact-issues .fact-issue-row .admin_link:hover {
  text-decoration: underline;
}
#contenido_admin .rossa-fact-issues .fact-issue-message {
  max-width: 420px;
  line-height: 1.45;
  color: var(--rossa-ink);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
#contenido_admin .rossa-fact-issues .fact-issue-bookings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#contenido_admin .rossa-fact-issues .fact-booking-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius-pill);
  background: var(--rossa-white);
  color: var(--rossa-cyan);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transform: none;
}
#contenido_admin .rossa-fact-issues .fact-booking-badge:hover {
  background: var(--rossa-tint);
  border-color: var(--rossa-teal);
  color: var(--rossa-teal);
  text-decoration: none;
}

/* Badges — outline suave */
#contenido_admin .rossa-fact-issues .fact-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--rossa-radius);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  color: var(--rossa-muted);
}
#contenido_admin .rossa-fact-issues .fact-badge-emission-draft,
#contenido_admin .rossa-fact-issues .fact-badge-emission-confirmed,
#contenido_admin .rossa-fact-issues .fact-badge-emission-final,
#contenido_admin .rossa-fact-issues .fact-badge-emission-provisional,
#contenido_admin .rossa-fact-issues .fact-badge-error-validation,
#contenido_admin .rossa-fact-issues .fact-badge-error-client,
#contenido_admin .rossa-fact-issues .fact-badge-error-calculation,
#contenido_admin .rossa-fact-issues .fact-badge-error-duplicate,
#contenido_admin .rossa-fact-issues .fact-badge-error-other {
  background: var(--rossa-white);
  border-color: var(--rossa-border);
  color: var(--rossa-muted);
}

/* Estado resuelto / pendiente — texto discreto */
#contenido_admin .rossa-fact-issues .fact-issue-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  border: 0;
  background: transparent;
  white-space: nowrap;
}
#contenido_admin .rossa-fact-issues .fact-issue-status--pending {
  color: var(--rossa-coral);
}
#contenido_admin .rossa-fact-issues .fact-issue-status--pending i {
  opacity: .65;
}
#contenido_admin .rossa-fact-issues .fact-issue-status--resolved {
  color: var(--rossa-green);
}
#contenido_admin .rossa-fact-issues .fact-issue-status--resolved i {
  opacity: .65;
}
#contenido_admin .rossa-fact-issues .fact-issue-status__date {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--rossa-muted);
}

/* Vacío */
#contenido_admin .rossa-fact-issues .fact-issues-empty {
  padding: 48px 20px;
  text-align: center;
  border: 1px dashed var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
}
#contenido_admin .rossa-fact-issues .fact-issues-empty__icon {
  font-size: 36px;
  color: var(--rossa-border);
  margin-bottom: 12px;
}
#contenido_admin .rossa-fact-issues .fact-issues-empty h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--rossa-navy);
}
#contenido_admin .rossa-fact-issues .fact-issues-empty p {
  margin: 0;
  font-size: 14px;
  color: var(--rossa-muted);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 992px) {
  #contenido_admin .rossa-fact-issues .fact-issues-table.rossa-fact-issues-table {
    min-width: 860px;
  }
}
@media (max-width: 768px) {
  #contenido_admin .rossa-fact-issues .rossa-fact-issues-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  #contenido_admin .rossa-fact-issues .rossa-fact-issues-view {
    width: 100%;
    justify-content: flex-start;
    gap: 0;
  }
  #contenido_admin .rossa-fact-issues .rossa-fact-issues-view__btn {
    flex: 0 1 auto;
    justify-content: center;
    margin: 0 12px 0 0;
    padding: 0 2px;
    font-size: 13px;
  }
  #contenido_admin .rossa-fact-issues .rossa-fact-issues-summary {
    width: 100%;
  }
  #contenido_admin .rossa-fact-issues .rossa-fact-issues-bulk {
    flex-direction: column;
    align-items: stretch;
  }
  #contenido_admin .rossa-fact-issues .rossa-fact-issues-bulk__btn {
    width: 100%;
  }
  #contenido_admin .rossa-fact-issues .rossa-fact-issues-list__scroll {
    overflow-x: visible;
    padding: 10px;
  }
  #contenido_admin .rossa-fact-issues .fact-issues-table.rossa-fact-issues-table {
    min-width: 0 !important;
    display: block;
    overflow-x: visible !important;
    white-space: normal !important;
    border-collapse: separate;
    border-spacing: 0 10px;
  }
  #contenido_admin .rossa-fact-issues .fact-issues-table.rossa-fact-issues-table thead,
  #contenido_admin .rossa-fact-issues .rossa-fact-issues-group__head {
    display: none;
  }
  #contenido_admin .rossa-fact-issues .fact-issues-table.rossa-fact-issues-table tbody {
    display: block;
  }
  #contenido_admin .rossa-fact-issues .fact-issue-row {
    display: block;
    margin: 0 0 10px;
    border: 1px solid var(--rossa-border) !important;
    border-radius: var(--rossa-radius) !important;
    overflow: visible;
  }
  #contenido_admin .rossa-fact-issues .fact-issue-row td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 0 !important;
    border-bottom: 1px solid var(--rossa-hairline-soft) !important;
    border-left: 0 !important;
    background: transparent !important;
    text-align: left;
  }
  #contenido_admin .rossa-fact-issues .fact-issue-row td:last-child {
    border-bottom: 0 !important;
  }
  #contenido_admin .rossa-fact-issues .fact-issue-row td::before {
    content: attr(data-label);
    display: block;
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--rossa-muted);
    line-height: 1.35;
  }
  #contenido_admin .rossa-fact-issues .fact-issue-row td[data-label=""]::before,
  #contenido_admin .rossa-fact-issues .fact-issue-row td.fact-issues-col-check::before {
    content: none;
    display: none;
    margin: 0;
  }
  #contenido_admin .rossa-fact-issues .fact-issue-row td.fact-issues-col-check {
    border-bottom: 1px solid var(--rossa-border) !important;
    padding-bottom: 10px;
  }
  #contenido_admin .rossa-fact-issues .fact-issue-row td > * {
    max-width: 100%;
  }
  #contenido_admin .rossa-fact-issues .fact-issue-bookings-cell .fact-issue-bookings {
    width: 100%;
  }
  #contenido_admin .rossa-fact-issues .fact-issue-row--pending,
  #contenido_admin .rossa-fact-issues .fact-issue-row--resolved {
    border-left: 0 !important;
    background: var(--rossa-white) !important;
  }
  #contenido_admin .rossa-fact-issues .fact-issue-row--resolved td {
    color: var(--rossa-muted);
  }
  #contenido_admin .rossa-fact-issues .fact-issue-message {
    max-width: none !important;
    width: 100%;
    text-align: left;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #contenido_admin .rossa-fact-issues .fact-issue-client .admin_link,
  #contenido_admin .rossa-fact-issues .fact-issue-row--resolved .admin_link {
    display: inline;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #contenido_admin .rossa-fact-issues .fact-issue-status-cell {
    text-align: left;
  }
  #contenido_admin .rossa-fact-issues .fact-issue-status__date {
    text-align: right;
  }
}

/*=============================================================================
  40. SCREEN: Gestión de clientes + Ver cliente (+ add_cliente)
  ---------------------------------------------------------------------------
  gestor_clientes.php, ver_cliente.php, add_cliente.php. Listado de reservas
  en ver_cliente vía vistas_reservas.php (§11/§18/§20). Overrides locales
  bajo .rossa-ver-cliente-bookings; el include compartido usa flags
  $view_client / $quitarAccionEliminar.
=============================================================================*/

/* --- Barra de acciones reutilizable ------------------------------------- */
#contenido_admin .rossa-page-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 16px 0 20px;
  padding: 14px 16px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-hairline-soft);
  border-radius: var(--rossa-radius);
}
#contenido_admin .rossa-page-toolbar--compact {
  justify-content: flex-start;
  padding: 12px 14px;
  margin: 10px 0 14px;
}
#contenido_admin .rossa-page-toolbar--selector {
  margin-top: 0;
  border-style: solid;
  border-color: var(--rossa-hairline-soft);
  border-left: 4px solid var(--rossa-teal);
  background: var(--rossa-white);
}
#contenido_admin.rossa-clientes-page .rossa-page-toolbar--selector {
  margin: 12px 0 14px;
}
#contenido_admin.rossa-clientes-page .rossa-page-toolbar--selector .rossa-page-toolbar__actions {
  width: 100%;
  justify-content: flex-start;
}
#contenido_admin.rossa-clientes-page .rossa-page-toolbar--selector .asigna_cliente_submit,
#contenido_admin.rossa-clientes-page .rossa-page-toolbar--selector .fusiona_cliente_submit {
  font-weight: 700;
}
#contenido_admin.rossa-clientes-page .rossa-page-toolbar--selector .asigna_cliente_submit:disabled,
#contenido_admin.rossa-clientes-page .rossa-page-toolbar--selector .fusiona_cliente_submit:disabled {
  opacity: .45;
  cursor: not-allowed;
}
#contenido_admin.rossa-clientes-page .rossa-page-toolbar--selector .rossa-btn-cancel {
  color: var(--rossa-muted);
  border-color: var(--rossa-border);
}
#contenido_admin.rossa-clientes-page .rossa-page-toolbar--selector .rossa-btn-cancel:hover {
  color: var(--rossa-ink);
  background: var(--rossa-surface);
  border-color: #c7cfcf;
}
#contenido_admin .rossa-page-toolbar__nav,
#contenido_admin .rossa-page-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
#contenido_admin .rossa-page-toolbar .admin_boton,
#contenido_admin .rossa-page-toolbar input.admin_boton,
#contenido_admin .rossa-page-toolbar input[type="submit"].admin_boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
}
#contenido_admin .rossa-page-toolbar .admin_boton i {
  font-size: 13px;
  line-height: 1;
}

/* --- Gestor de clientes — filtros (panel desplegable) ------------------- */
#contenido_admin.rossa-clientes-page .rossa-clientes-filters-panel {
  margin: 0 0 14px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  overflow: hidden;
}
#contenido_admin.rossa-clientes-page .rossa-clientes-filters-panel:not([open]) {
  border-left: 4px solid var(--rossa-teal);
}
#contenido_admin.rossa-clientes-page .rossa-clientes-filters-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  font-family: var(--rossa-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--rossa-navy);
  background: var(--rossa-strip);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background-color .15s ease, color .15s ease;
}
#contenido_admin.rossa-clientes-page .rossa-clientes-filters-panel__head::-webkit-details-marker {
  display: none;
}
#contenido_admin.rossa-clientes-page .rossa-clientes-filters-panel__head::marker {
  content: "";
}
#contenido_admin.rossa-clientes-page .rossa-clientes-filters-panel__title {
  display: inline-flex;
  align-items: center;
}
#contenido_admin.rossa-clientes-page .rossa-clientes-filters-panel__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--rossa-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
#contenido_admin.rossa-clientes-page .rossa-clientes-filters-panel__hint--open {
  display: none;
}
#contenido_admin.rossa-clientes-page .rossa-clientes-filters-panel[open] .rossa-clientes-filters-panel__hint--closed {
  display: none;
}
#contenido_admin.rossa-clientes-page .rossa-clientes-filters-panel[open] .rossa-clientes-filters-panel__hint--open {
  display: inline;
}
#contenido_admin.rossa-clientes-page .rossa-clientes-filters-panel__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius-pill);
  background: var(--rossa-white);
  color: var(--rossa-teal);
  font-size: 11px;
  transition: transform .15s ease, border-color .15s ease, color .15s ease;
}
#contenido_admin.rossa-clientes-page .rossa-clientes-filters-panel[open] > .rossa-clientes-filters-panel__head {
  border-bottom: 1px solid var(--rossa-hairline-soft);
}
#contenido_admin.rossa-clientes-page .rossa-clientes-filters-panel[open] .rossa-clientes-filters-panel__chevron {
  transform: rotate(180deg);
  border-color: rgba(0, 94, 102, .28);
}
#contenido_admin.rossa-clientes-page .rossa-clientes-filters-panel__head:hover {
  background: var(--rossa-surface);
  color: var(--rossa-teal);
}
#contenido_admin.rossa-clientes-page .rossa-clientes-filters-panel__head:hover .rossa-clientes-filters-panel__toggle {
  color: var(--rossa-teal);
}
#contenido_admin.rossa-clientes-page .rossa-clientes-filters-panel__head:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(0, 94, 102, .22);
}
#contenido_admin.rossa-clientes-page form.rossa-clientes-filters {
  margin: 0;
  padding: 14px 16px 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
#contenido_admin.rossa-clientes-page form.rossa-clientes-filters table.rossa-clientes-filters__grid {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
#contenido_admin.rossa-clientes-page form.rossa-clientes-filters tr.cab td {
  display: none;
}
#contenido_admin.rossa-clientes-page form.rossa-clientes-filters table.estandar tr:not(.cab):not(.rossa-clientes-filters__submit) {
  display: grid;
  grid-template-columns: minmax(84px, 104px) minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(32, 92, 104, .08);
}
#contenido_admin.rossa-clientes-page form.rossa-clientes-filters table.estandar tr:not(.cab):not(.rossa-clientes-filters__submit) td {
  border: 0;
  padding: 3px 0;
  background: transparent !important;
  font-size: 13px;
}
#contenido_admin.rossa-clientes-page form.rossa-clientes-filters table.estandar tr:not(.cab):not(.rossa-clientes-filters__submit) td:first-child {
  width: auto;
  min-width: 0;
  color: var(--rossa-muted);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
}
#contenido_admin.rossa-clientes-page form.rossa-clientes-filters table.estandar tr td input[type="text"],
#contenido_admin.rossa-clientes-page form.rossa-clientes-filters table.estandar tr td input[type="search"],
#contenido_admin.rossa-clientes-page form.rossa-clientes-filters table.estandar tr td select {
  width: 100%;
  max-width: 280px;
  height: 32px;
  padding: 4px 10px;
  font-size: 13px;
  box-sizing: border-box;
}
#contenido_admin.rossa-clientes-page form.rossa-clientes-filters table.estandar tr td select + select {
  margin-left: 6px;
  max-width: 160px;
}
#contenido_admin.rossa-clientes-page form.rossa-clientes-filters table.estandar tr td .campo_texto {
  max-width: 200px;
  height: 32px;
  font-size: 13px;
}
#contenido_admin.rossa-clientes-page form.rossa-clientes-filters table.estandar tr.rossa-clientes-filters__submit {
  display: block;
  padding: 14px 0 0;
  margin-top: 8px;
  border-top: 1px solid var(--rossa-hairline-soft);
  border-bottom: 0;
}
#contenido_admin.rossa-clientes-page form.rossa-clientes-filters table.estandar tr.rossa-clientes-filters__submit td {
  display: block;
  width: 100%;
  padding: 0;
  text-align: center;
  border: 0;
  background: transparent !important;
  font-size: 13px;
}
#contenido_admin.rossa-clientes-page form.rossa-clientes-filters table.estandar tr.rossa-clientes-filters__submit td input[type="submit"].admin_boton,
#contenido_admin.rossa-clientes-page form.rossa-clientes-filters table.estandar tr.rossa-clientes-filters__submit td .admin_boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  height: 34px;
  padding: 7px 22px;
  font-size: 14px;
  line-height: 1;
}

/* Panel modo selector */
#contenido_admin.rossa-clientes-page .rossa-clientes-selector-info {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-hairline-soft);
  border-radius: var(--rossa-radius);
}
#contenido_admin.rossa-clientes-page .rossa-clientes-selector-info__picked {
  margin: 0;
  font-family: var(--rossa-font);
  font-size: 13px;
  color: var(--rossa-muted);
  line-height: 1.4;
}
#contenido_admin.rossa-clientes-page .rossa-clientes-selector-info__picked strong {
  color: var(--rossa-teal);
  font-weight: 700;
}
#contenido_admin.rossa-clientes-page .rossa-clientes-selector-info .rossa-clientes-warn {
  margin: 8px 0 0;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
}
#contenido_admin.rossa-clientes-page .rossa-page-toolbar--compact {
  margin-bottom: 10px;
}
#contenido_admin.rossa-clientes-page .rossa-clientes-pag {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  margin: 0 0 12px;
  font-family: var(--rossa-font);
}
#contenido_admin.rossa-clientes-page .rossa-clientes-pag--top {
  margin-top: 8px;
  margin-bottom: 0;
  padding: 10px 14px;
  background: var(--rossa-strip);
  border: 1px solid var(--rossa-hairline-soft);
  border-radius: var(--rossa-radius);
  box-sizing: border-box;
}
#contenido_admin.rossa-clientes-page .rossa-page-toolbar--compact + .rossa-clientes-pag--top {
  margin-top: 0;
}
#contenido_admin.rossa-clientes-page .rossa-clientes-pag--top + .rossa-clientes-list {
  margin-top: 10px;
}
#contenido_admin.rossa-clientes-page .rossa-clientes-pag--bottom {
  margin: 16px 0 6px;
}
#contenido_admin.rossa-clientes-page .rossa-clientes-pag__summary {
  margin: 0;
  font-size: 14px;
  color: var(--rossa-muted);
  line-height: 1.4;
}
#contenido_admin.rossa-clientes-page .rossa-clientes-pag__summary strong {
  color: var(--rossa-ink);
  font-weight: 600;
}
#contenido_admin.rossa-clientes-page .rossa-clientes-pag__links {
  margin: 0;
  width: 100%;
  text-align: left;
  line-height: 1.6;
}
#contenido_admin.rossa-clientes-page .rossa-clientes-pag__links .pactiva {
  color: var(--rossa-teal);
  font-weight: 700;
}
#contenido_admin.rossa-clientes-page .rossa-table--clientes {
  margin-top: 4px;
}
#contenido_admin.rossa-clientes-page .rossa-table--clientes tr.cab td {
  font-size: 11px;
  letter-spacing: .04em;
}
#contenido_admin.rossa-clientes-page .rossa-table--clientes td {
  font-family: var(--rossa-font);
  font-size: 14px;
  vertical-align: middle;
}
#contenido_admin.rossa-clientes-page .rossa-table--clientes tr.client-row td:first-child + td + td a.lydia_popup {
  color: var(--rossa-cyan-fig);
  font-weight: 600;
  text-decoration: none;
}
#contenido_admin.rossa-clientes-page .rossa-table--clientes tr.client-row td:first-child + td + td a.lydia_popup:hover {
  color: var(--rossa-teal);
  text-decoration: underline;
}
#contenido_admin.rossa-clientes-page .gestclimail {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--rossa-muted);
  line-height: 1.35;
}
#contenido_admin.rossa-clientes-page .rossa-table--clientes td:last-child {
  text-align: right;
  white-space: nowrap;
}
#contenido_admin.rossa-clientes-page .rossa-table--clientes td:last-child a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
}
#contenido_admin.rossa-clientes-page .rossa-table--clientes td[align="right"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#contenido_admin.rossa-clientes-page table.estandar .rossa-clientes-warn {
  display: block;
  padding: 10px 14px;
  border-radius: var(--rossa-radius);
  background: #fdf3e7;
  border: 1px solid #f6d6cd;
  color: var(--rossa-coral);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}

/* --- Ver cliente -------------------------------------------------------- */
#contenido_admin.rossa-ver-cliente-page .rossa-section-title {
  font-family: var(--rossa-font);
  font-size: 17px;
  font-weight: 600;
  color: var(--rossa-navy);
  margin: 28px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rossa-hairline-soft);
}
#contenido_admin.rossa-ver-cliente-page #clientdata {
  margin: 0 0 20px;
  border: 1px solid var(--rossa-hairline-soft);
  border-radius: var(--rossa-radius);
  overflow: hidden;
}
#contenido_admin.rossa-ver-cliente-page #clientdata tr td:first-child {
  width: 34%;
  color: var(--rossa-muted);
  font-weight: 600;
}
#contenido_admin.rossa-ver-cliente-page #clientdata tr td:first-child strong {
  font-weight: 600;
  color: var(--rossa-muted);
}
#contenido_admin.rossa-ver-cliente-page #clientdata a.admin_link {
  color: var(--rossa-cyan-fig);
  font-weight: 600;
  text-decoration: none;
}
#contenido_admin.rossa-ver-cliente-page #clientdata a.admin_link:hover {
  color: var(--rossa-teal);
  text-decoration: underline;
}
#contenido_admin.rossa-ver-cliente-page #clientdata tr:last-child td {
  padding-top: 14px;
  padding-bottom: 14px;
}
#contenido_admin.rossa-ver-cliente-page #edit {
  margin: 0 0 20px;
  border: 1px solid var(--rossa-hairline-soft);
  border-radius: var(--rossa-radius);
  overflow: hidden;
}
#contenido_admin.rossa-ver-cliente-page #edit tr td:first-child {
  width: 34%;
  color: var(--rossa-muted);
  font-weight: 600;
}
#contenido_admin.rossa-ver-cliente-page #edit tr td:first-child strong,
#contenido_admin.rossa-ver-cliente-page #edit tr td:first-child label {
  font-weight: 600;
  color: var(--rossa-muted);
}
#contenido_admin.rossa-ver-cliente-page #edit textarea {
  min-height: 90px;
  max-width: 480px;
}
#contenido_admin.rossa-ver-cliente-page .rossa-ver-cliente-bookings {
  margin: 0 0 8px;
}
#contenido_admin.rossa-ver-cliente-page .rossa-ver-cliente-bookings .rossa-table__container {
  margin-top: 4px;
  -webkit-overflow-scrolling: touch;
}
#contenido_admin.rossa-ver-cliente-page .rossa-ver-cliente-bookings .table-sortable {
  min-width: 880px;
}
#contenido_admin.rossa-ver-cliente-page .rossa-ver-cliente-bookings .rossa-table thead th {
  color: var(--rossa-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
#contenido_admin.rossa-ver-cliente-page .rossa-ver-cliente-bookings .tr-pedidos.cancelada td {
  color: var(--rossa-red);
}
#contenido_admin.rossa-ver-cliente-page .rossa-ver-cliente-bookings .precio_rsv {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#contenido_admin.rossa-ver-cliente-page .rossa-ver-cliente-bookings .rossa-btn {
  margin: 2px;
  font-size: 12px;
  padding: 6px 10px;
}
#contenido_admin.rossa-ver-cliente-page .booking-actions-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  margin: 0 0 16px;
  background: var(--rossa-strip);
  border: 1px solid var(--rossa-hairline-soft);
  border-radius: var(--rossa-radius);
}
#contenido_admin.rossa-ver-cliente-page .booking-actions-toolbar .toolbar-info {
  font-family: var(--rossa-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--rossa-ink);
}
#contenido_admin.rossa-ver-cliente-page .booking-actions-toolbar .toolbar-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#contenido_admin.rossa-ver-cliente-page .booking-actions-toolbar .admin_boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
#contenido_admin.rossa-ver-cliente-page .booking-actions-toolbar .admin_boton:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* --- tabla_reservas.php (#tabla_pedidos) — check_errores y legacy -------- */
#contenido_admin #tabla_pedidos {
  border: 0;
  font-size: 14px;
  margin: 12px 0 20px;
}
#contenido_admin #tabla_pedidos tr.cab .order_link {
  color: var(--rossa-navy);
  font-weight: 600;
  text-decoration: none;
}
#contenido_admin #tabla_pedidos tr.cab .order_link:hover {
  color: var(--rossa-teal);
}
#contenido_admin #tabla_pedidos tr.cab .order_link::before {
  border-bottom-color: var(--rossa-muted);
}
#contenido_admin #tabla_pedidos tr.cab .order_link::after {
  border-top-color: var(--rossa-muted);
}
#contenido_admin #tabla_pedidos .nombre_cliente_res {
  color: var(--rossa-cyan-fig);
  font-weight: 600;
  text-decoration: none;
}
#contenido_admin #tabla_pedidos .nombre_cliente_res:hover {
  color: var(--rossa-teal);
  text-decoration: underline;
}
#contenido_admin #tabla_pedidos tr.tr-pedidos.cancelada td {
  color: var(--rossa-red);
}
#contenido_admin #tabla_pedidos .precio_rsv {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  #contenido_admin .rossa-page-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  #contenido_admin .rossa-page-toolbar__nav,
  #contenido_admin .rossa-page-toolbar__actions {
    width: 100%;
    justify-content: flex-start;
  }
  #contenido_admin .rossa-page-toolbar__nav {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rossa-hairline-soft);
  }
  #contenido_admin .rossa-page-toolbar .admin_boton,
  #contenido_admin .rossa-page-toolbar input.admin_boton,
  #contenido_admin .rossa-page-toolbar input[type="submit"].admin_boton {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
    text-align: center;
  }
}

@media (max-width: 768px) {
  #contenido_admin.rossa-clientes-page .rossa-clientes-pag--top {
    width: calc(100% + 24px);
    margin-left: -12px;
    margin-right: -12px;
    margin-top: 6px;
    margin-bottom: 0;
    padding: 10px 16px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  #contenido_admin.rossa-clientes-page .rossa-page-toolbar--compact + .rossa-clientes-pag--top {
    margin-top: 0;
  }
  #contenido_admin.rossa-clientes-page .rossa-clientes-pag--top + .rossa-clientes-list {
    margin-top: 0;
  }
  #contenido_admin.rossa-clientes-page .rossa-clientes-pag--bottom {
    width: calc(100% + 24px);
    margin-left: -12px;
    margin-right: -12px;
    padding: 10px 16px;
    background: var(--rossa-strip);
    border: 1px solid var(--rossa-hairline-soft);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-sizing: border-box;
  }
  #contenido_admin.rossa-clientes-page .rossa-clientes-filters-panel__head {
    padding: 11px 12px;
    gap: 10px;
  }
  #contenido_admin.rossa-clientes-page .rossa-clientes-filters-panel__toggle {
    gap: 6px;
    font-size: 11px;
  }
  #contenido_admin.rossa-clientes-page .rossa-clientes-filters-panel__chevron {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  #contenido_admin.rossa-clientes-page form.rossa-clientes-filters {
    padding: 10px 12px 8px;
  }
  #contenido_admin.rossa-clientes-page form.rossa-clientes-filters table.estandar tr:not(.cab):not(.rossa-clientes-filters__submit) {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 8px 0;
  }
  #contenido_admin.rossa-clientes-page form.rossa-clientes-filters table.estandar tr td input[type="text"],
  #contenido_admin.rossa-clientes-page form.rossa-clientes-filters table.estandar tr td select,
  #contenido_admin.rossa-clientes-page form.rossa-clientes-filters table.estandar tr td .campo_texto {
    max-width: none;
  }
  #contenido_admin.rossa-clientes-page form.rossa-clientes-filters table.estandar tr td select + select {
    margin-left: 0;
    margin-top: 6px;
    max-width: none;
    display: block;
    width: 100%;
  }
  #contenido_admin.rossa-clientes-page form.rossa-clientes-filters table.estandar tr.rossa-clientes-filters__submit {
    padding-top: 12px;
  }
  #contenido_admin.rossa-clientes-page form.rossa-clientes-filters table.estandar tr.rossa-clientes-filters__submit td input[type="submit"].admin_boton,
  #contenido_admin.rossa-clientes-page form.rossa-clientes-filters table.estandar tr.rossa-clientes-filters__submit td .admin_boton {
    width: min(280px, 100%);
  }
  #contenido_admin.rossa-clientes-page .rossa-page-toolbar--selector .rossa-page-toolbar__actions {
    flex-direction: column;
    align-items: stretch;
  }
  #contenido_admin.rossa-clientes-page .rossa-page-toolbar--selector .admin_boton {
    width: 100%;
    justify-content: center;
  }
  #contenido_admin.rossa-clientes-page #cont-config {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #contenido_admin.rossa-clientes-page .rossa-clientes-list {
    overflow: visible !important;
    width: calc(100% + 24px);
    max-width: none;
    margin-left: -12px;
    margin-right: -12px;
    padding: 0;
    box-sizing: border-box;
  }
  #contenido_admin.rossa-clientes-page table#clientes.rossa-table--clientes {
    display: block !important;
    overflow: visible !important;
    overflow-x: visible !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-spacing: 0 !important;
    border-collapse: separate;
    background: transparent !important;
    border-radius: 0 !important;
    box-sizing: border-box;
  }
  #contenido_admin.rossa-clientes-page table#clientes.rossa-table--clientes > thead,
  #contenido_admin.rossa-clientes-page table#clientes.rossa-table--clientes > tbody,
  #contenido_admin.rossa-clientes-page table#clientes.rossa-table--clientes > tfoot {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }
  #contenido_admin.rossa-clientes-page #clientes tr.cab {
    display: none !important;
  }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row {
    display: block !important;
    width: 100% !important;
    max-width: none;
    box-sizing: border-box;
    margin: 0;
    padding: 14px 16px;
    border: 0 !important;
    border-bottom: 1px solid var(--rossa-border) !important;
    border-radius: 0 !important;
    background: var(--rossa-white) !important;
    overflow: hidden;
  }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row:last-child {
    border-bottom: 0 !important;
  }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row td {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    padding: 6px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: right;
    white-space: normal;
    box-sizing: border-box;
    box-shadow: none !important;
  }
  /* Anula §6 .rossa-table tbody td y bordes legacy de table.estandar (lydia) */
  #contenido_admin.rossa-clientes-page table#clientes.rossa-table--clientes.estandar tbody tr.client-row > td,
  #contenido_admin.rossa-clientes-page table#clientes.rossa-table--clientes.estandar tbody tr.client-row > td:first-child {
    border: none !important;
    border-left: none !important;
    border-radius: 0 !important;
  }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row td::before {
    flex: 0 0 38%;
    max-width: 38%;
    padding-top: 2px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--rossa-muted);
    text-align: left;
    line-height: 1.35;
  }
  /* Listado normal */
  #contenido_admin.rossa-clientes-page #clientes tr.client-row:not(:has(.select-cli)) td:nth-child(1) {
    display: none !important;
  }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row:not(:has(.select-cli)) td:nth-child(2) {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 0 0 2px !important;
    margin-bottom: 0;
    border: none !important;
    border-bottom: none !important;
  }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row:not(:has(.select-cli)) td:nth-child(2)::before {
    content: none;
  }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row:not(:has(.select-cli)) td:nth-child(3) {
    padding-top: 0 !important;
    border: none !important;
  }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row:not(:has(.select-cli)) td:nth-child(3)::before { content: "Teléfono"; }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row:not(:has(.select-cli)) td:nth-child(4)::before { content: "NIF/CIF"; }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row:not(:has(.select-cli)) td:nth-child(5)::before { content: "Registrado"; }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row:not(:has(.select-cli)) td:nth-child(6)::before { content: "Nº reservas"; }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row:not(:has(.select-cli)) td:nth-child(7) {
    display: flex !important;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 10px !important;
    margin-top: 4px;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-top: 1px solid var(--rossa-hairline-soft) !important;
  }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row:not(:has(.select-cli)) td:nth-child(7)::before {
    content: none;
  }
  /* Modo selector */
  #contenido_admin.rossa-clientes-page #clientes tr.client-row:has(.select-cli) td:nth-child(1) {
    display: flex !important;
    justify-content: flex-start;
    padding-bottom: 6px !important;
    margin-bottom: 0;
    border: none !important;
    border-bottom: none !important;
  }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row:has(.select-cli) td:nth-child(1)::before {
    content: "Seleccionar";
  }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row:has(.select-cli) td:nth-child(2) {
    display: none !important;
  }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row:has(.select-cli) td:nth-child(3) {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 0 0 2px !important;
    margin-bottom: 0;
    border: none !important;
    border-bottom: none !important;
  }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row:has(.select-cli) td:nth-child(3)::before {
    content: none;
  }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row:has(.select-cli) td:nth-child(4) {
    padding-top: 0 !important;
    border: none !important;
  }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row:has(.select-cli) td:nth-child(4)::before { content: "Teléfono"; }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row:has(.select-cli) td:nth-child(5)::before { content: "NIF/CIF"; }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row:has(.select-cli) td:nth-child(6)::before { content: "Registrado"; }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row:has(.select-cli) td:nth-child(7)::before { content: "Nº reservas"; }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row td a.lydia_popup {
    font-size: 15px;
    word-break: break-word;
  }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row .gestclimail {
    word-break: break-word;
    margin-top: 2px;
  }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row td[align="right"] {
    text-align: right;
  }
  #contenido_admin.rossa-clientes-page #clientes tr.client-row td:last-child a {
    margin: 0 4px;
  }
  #contenido_admin.rossa-ver-cliente-page #clientdata tr:not(.cab),
  #contenido_admin.rossa-ver-cliente-page #edit tr:not(.cab) {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rossa-hairline-soft);
  }
  #contenido_admin.rossa-ver-cliente-page #clientdata tr:not(.cab) td,
  #contenido_admin.rossa-ver-cliente-page #edit tr:not(.cab) td {
    display: block;
    width: 100% !important;
    padding: 4px 12px;
    box-sizing: border-box;
  }
  #contenido_admin.rossa-ver-cliente-page #clientdata tr:not(.cab) td:first-child,
  #contenido_admin.rossa-ver-cliente-page #edit tr:not(.cab) td:first-child {
    padding-bottom: 0;
    font-size: 12px;
  }
  #contenido_admin.rossa-ver-cliente-page #clientdata tr.cab td,
  #contenido_admin.rossa-ver-cliente-page #edit tr.cab td {
    display: block;
    text-align: left;
    padding: 12px 14px;
  }
  #contenido_admin.rossa-ver-cliente-page #clientdata tr:last-child td,
  #contenido_admin.rossa-ver-cliente-page #edit tr:last-child td {
    text-align: center;
    padding: 14px 12px;
  }
  #contenido_admin.rossa-ver-cliente-page .rossa-ver-cliente-bookings .table-sortable {
    min-width: 760px;
  }
  #contenido_admin.rossa-ver-cliente-page .booking-actions-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  #contenido_admin.rossa-ver-cliente-page .booking-actions-toolbar .toolbar-buttons {
    width: 100%;
  }
  #contenido_admin.rossa-ver-cliente-page .booking-actions-toolbar .admin_boton {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  #contenido_admin .rossa-page-toolbar .admin_boton,
  #contenido_admin .rossa-page-toolbar input.admin_boton,
  #contenido_admin .rossa-page-toolbar input[type="submit"].admin_boton {
    flex: 1 1 100%;
  }
}

/*=============================================================================
  BOOKING BILLING PANEL — fcts02 popup desde Ver reserva
  Overrides legacy .admin_boton / .rossa-btn on quick-generate actions.
=============================================================================*/
#contenido_admin .fact-booking-panel__quick-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}
#contenido_admin .fact-booking-panel__quick-form {
  margin: 0;
  flex: 1 1 200px;
  min-width: 0;
}
#contenido_admin .fact-booking-panel__quick-form--primary {
  flex: 2 1 280px;
}
#contenido_admin .fact-booking-panel__quick-form--secondary {
  flex: 1 1 200px;
  max-width: 280px;
}
#contenido_admin .fact-booking-panel button.fact-booking-panel__gen-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 76px;
  margin: 0;
  padding: 14px 18px;
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  box-sizing: border-box;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#contenido_admin .fact-booking-panel__gen-btn-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
}
#contenido_admin .fact-booking-panel__gen-btn-row strong {
  font-weight: 700;
}
#contenido_admin .fact-booking-panel__gen-btn-hint {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  opacity: 0.88;
}
#contenido_admin .fact-booking-panel button.fact-booking-panel__gen-btn--final {
  background: var(--rossa-teal);
  border: 1px solid var(--rossa-teal);
  color: var(--rossa-white);
}
#contenido_admin .fact-booking-panel button.fact-booking-panel__gen-btn--final:hover {
  background: #00474d;
  border-color: #00474d;
  color: var(--rossa-white);
}
#contenido_admin .fact-booking-panel button.fact-booking-panel__gen-btn--draft {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  color: var(--rossa-ink);
}
#contenido_admin .fact-booking-panel button.fact-booking-panel__gen-btn--draft:hover {
  background: var(--rossa-surface);
  border-color: var(--rossa-teal);
  color: var(--rossa-teal);
}
#contenido_admin .fact-booking-panel button.fact-booking-panel__gen-btn--draft .fact-booking-panel__gen-btn-hint {
  color: var(--rossa-muted);
  opacity: 1;
}
@media (max-width: 640px) {
  #contenido_admin .fact-booking-panel__quick-form--primary,
  #contenido_admin .fact-booking-panel__quick-form--secondary {
    flex: 1 1 100%;
    max-width: none;
  }
}
body.rossa-tabs-on .vr-actions__spacer { margin-left: auto; }

/* Sección avanzada colapsable (chevron propio) */
body.rossa-tabs-on .vr-disclosure { width: 100%; margin: 18px 0 0; border-top: 1px solid var(--rossa-hairline-soft); }
body.rossa-tabs-on .vr-disclosure__head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 0 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: 700 13px/1.2 var(--rossa-font);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rossa-teal);
  text-align: left;
}
body.rossa-tabs-on .vr-disclosure__head:hover { color: var(--rossa-ink); }
body.rossa-tabs-on .vr-disclosure__chev {
  margin-left: auto;
  color: var(--rossa-muted);
  transition: transform .18s ease;
  font-size: 13px;
}
body.rossa-tabs-on .vr-disclosure.is-open .vr-disclosure__chev { transform: rotate(180deg); }
body.rossa-tabs-on .vr-disclosure__body { padding-top: 14px; }
body.rossa-tabs-on .vr-disclosure:not(.is-open) .vr-disclosure__body { display: none; }

/* Pares label+control compactos (horas, nº huéspedes, IVA…) */
body.rossa-tabs-on .vr-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0 0 12px;
}
body.rossa-tabs-on .vr-field__label {
  flex: 0 0 200px;
  font: 700 13px/1.3 var(--rossa-font);
  color: var(--rossa-ink);
}
@media (max-width: 640px){
  body.rossa-tabs-on .vr-field__label { flex-basis: 100%; }
  .vr-summary__badges { margin-left: 0; }
}

/* --- Huéspedes: tarjetas de conteo (.guest-breakdown ya existe en el markup;
   se eleva a métricas escaneables tipo .vr-guestcount, solo CSS) ---------- */
body.rossa-tabs-on .guest-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  width: 100%;
  margin: 0;
}
body.rossa-tabs-on .guest-breakdown .guest-section {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: 12px;
  padding: 16px 18px;
}
body.rossa-tabs-on .guest-breakdown .guest-section h3 {
  margin: 0 0 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--rossa-hairline-soft);
  font: 700 12px/1 var(--rossa-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rossa-teal);
  text-align: left;
}
body.rossa-tabs-on .guest-breakdown .guest-counts {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: flex-start;
}
body.rossa-tabs-on .guest-breakdown .guest-type {
  display: flex;
  align-items: center;
  gap: 10px;
}
body.rossa-tabs-on .guest-breakdown .guest-type i {
  font-size: 18px;
  color: var(--rossa-muted);
  width: 22px;
  text-align: center;
}
body.rossa-tabs-on .guest-breakdown .guest-number {
  font: 700 26px/1 var(--rossa-font);
  color: var(--rossa-ink);
}
body.rossa-tabs-on .guest-breakdown .guest-number-lite {
  font-size: 15px;
  font-weight: 700;
  color: var(--rossa-muted);
}
/* el icono "sin datos" (parte de viajero) en muted, no negro */
body.rossa-tabs-on .guest-breakdown .guest-section.registered .guest-number-lite,
body.rossa-tabs-on .guest-breakdown .guest-section.expected .guest-number-lite { color: var(--rossa-ink); }
/* "Ver partes" pegado bajo las tarjetas de partes -> separar */
body.rossa-tabs-on .guest-breakdown + .rossa-ctr__btn-huespedes { margin-top: 16px; }

/* --- Cliente rework: ocultar legacy desnudo, normalizar separadores ------ */
body.rossa-tabs-on .vr-hide { display: none !important; }
body.rossa-tabs-on #bloque-cliente .rossa-box__dates,
body.rossa-tabs-on #bloque-cliente .rossa-ctr__data-client.vr-hide + .rossa-separator { display: none !important; }
/* separadores legacy a ancho completo (eliminan las líneas de tamaños dispares) */
body.rossa-tabs-on .rossa-ctr .rossa-separator { width: 100% !important; }
/* una sola línea bajo cada título: el título ya lleva border-bottom (§30); se
   oculta el .rossa-separator redundante que algunas tabs ponen justo después
   (en pagos el h1 va dentro de .rossa-ctr__main-content, de ahí el 2º selector) */
body.rossa-tabs-on .rossa-ctr > h1 + .rossa-separator,
body.rossa-tabs-on .rossa-ctr__main-content > h1 + .rossa-separator { display: none !important; }

/* aside de sección como enlace */
body.rossa-tabs-on a.vr-section__aside { color: var(--rossa-cyan); text-decoration: none; }
body.rossa-tabs-on a.vr-section__aside:hover { text-decoration: underline; }
/* dash de valor vacío */
body.rossa-tabs-on .vr-kv__empty { color: var(--rossa-muted); }
/* logo de origen + nombre (inline-flex para que el gap separe icono y texto) */
body.rossa-tabs-on .vr-kv__value--origin { display: inline-flex; align-items: center; gap: 10px; }
body.rossa-tabs-on .vr-kv__value--origin img { height: 34px; width: auto; flex: 0 0 auto; }
body.rossa-tabs-on .vr-kv__value--origin .referral { color: var(--rossa-muted); font-size: 12px; }

/* Pagado: usa el MISMO badge que Gestión de reservas (.rossa-card-tag, def. en
   pagina_inicio.css) + texto. Lo escalamos un poco para la card del Resumen. */
body.rossa-tabs-on #bloque-resumen .vr-kv__value--pay { display: inline-flex; align-items: center; gap: 10px; }
body.rossa-tabs-on #bloque-resumen .vr-kv__value--pay .rossa-card-tag {
  flex: 0 0 auto; width: 32px; height: 32px; font-size: 13px;
}
body.rossa-tabs-on #bloque-resumen .vr-pay-text { font: 600 13.5px/1.3 var(--rossa-font); color: var(--rossa-ink); }

/* --- Comunicaciones: reskin del log de notificaciones (table.full_tabla) ---
   Render de vendor (no editable): se transforma por CSS de "board" pesado a
   tabla limpia — filas slim, chips de estado compactos, acciones secundarias. */
body.rossa-tabs-on table.full_tabla td { padding: 10px 12px !important; vertical-align: middle; font-size: 13px; }
body.rossa-tabs-on table.full_tabla tr.cab td { padding: 10px 12px !important; }
/* chip de destinatario/estado: de cuadro grande de color a pastilla compacta */
body.rossa-tabs-on table.full_tabla .destinatarios_box {
  display: inline-block;
  width: auto !important;
  max-width: 240px;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 6px 11px !important;
  border-radius: var(--rossa-radius) !important;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}
/* botones de acción por fila: compactos, secundarios (outline) en vez de losas teal */
body.rossa-tabs-on table.full_tabla td .admin_boton {
  display: inline-block;
  width: auto !important;
  margin: 2px 2px !important;
  padding: 6px 11px !important;
  font-size: 12px !important;
  font-weight: 700;
  background: var(--rossa-white) !important;
  color: var(--rossa-teal) !important;
  border: 1px solid var(--rossa-border) !important;
  box-shadow: none !important;
}
body.rossa-tabs-on table.full_tabla td .admin_boton:hover {
  border-color: var(--rossa-teal) !important;
  background: var(--rossa-tint) !important;
  color: var(--rossa-teal) !important;
}
/* la celda de acciones agrupa los botones en una columna estrecha alineada */
body.rossa-tabs-on table.full_tabla td:last-child { white-space: nowrap; text-align: right; }
/* el bloque de notificaciones iba a 980px y desplazado 50px a la derecha:
   alinear con el resto del panel (ancho completo) y contener la tabla ancha */
body.rossa-tabs-on .rossa-vr-extra {
  max-width: none !important;
  width: 100%;
  margin: 0 !important;
  overflow-x: auto;
}
body.rossa-tabs-on .rossa-vr-extra table.full_tabla { width: 100% !important; max-width: 100%; }
/* acciones del log apiladas y compactas -> la columna no ensancha la tabla */
body.rossa-tabs-on table.full_tabla td:last-child .admin_boton { display: block; width: 100% !important; margin: 3px 0 !important; text-align: center; }
body.rossa-tabs-on table.full_tabla td:last-child { width: 1%; }

/* Modal "Ver Contenido" del log */
#contenido_admin .contenido_popup {
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  padding: 22px 24px;
  max-width: 460px;
  width: calc(100% - 40px);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(22, 41, 45, .18);
  text-align: left;
}
#contenido_admin .contenido_popup .titulo {
  background: none;
  color: var(--rossa-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  padding: 0 0 5px;
  margin: 18px 0 7px;
  border-bottom: 1px solid var(--rossa-border);
  border-radius: 0;
}
#contenido_admin .contenido_popup .titulo:first-child { margin-top: 0; }
#contenido_admin .contenido_popup .titulo + div {
  text-align: left;
  color: var(--rossa-ink);
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
}
#contenido_admin .contenido_popup .close_content_button { margin-top: 18px; }

/* =============================================================================
   31b. REWORK — neutralización del cruft de las cards/boards viejas
   Las tabs arrastran fondos grises, contenedores anidados y separadores oscuros
   de la versión antigua. Se aplanan dentro de body.rossa-tabs-on.
   ========================================================================== */
/* wrappers legacy con fondo gris / doble caja -> plano transparente */
body.rossa-tabs-on .guest-breakdown,
body.rossa-tabs-on .rossa-ctr__huespedes,
body.rossa-tabs-on .rossa-ctr__main-content,
body.rossa-tabs-on .rossa-ctr__payment-try,
body.rossa-tabs-on .rossa-ctr__status-payment {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.rossa-tabs-on .guest-breakdown { padding: 0 !important; }
/* separadores legacy (eran #B2B2B2 oscuros) -> hairline suave */
body.rossa-tabs-on .rossa-ctr .rossa-separator {
  background: var(--rossa-hairline-soft) !important;
  height: 1px !important;
  margin: 18px 0 !important;
}

/* Timeline: contener el scroll horizontal DENTRO del panel, no en la página */
body.rossa-tabs-on #bloque-timeline { overflow-x: auto; max-width: 100%; }
body.rossa-tabs-on .rossa-ctr-block--timeline { max-width: 100%; overflow: hidden; }

/* Comunicaciones: botones Guardar / Editar destinatarios + acciones del log,
   menos protagonismo (secundarios, compactos) */
body.rossa-tabs-on .rossa-vr-extra .admin_boton {
  padding: 7px 13px;
  font-size: 13px;
}

/* --- Pagos: banner de saldo (sustituye la caja salmón "board") ----------- */
body.rossa-tabs-on .vr-balance {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px 32px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 16px;
  padding: 18px 22px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: 12px;
}
body.rossa-tabs-on .vr-balance__cell { display: flex; flex-direction: column; gap: 5px; }
body.rossa-tabs-on .vr-balance__cell--amount { text-align: right; margin-left: auto; }
body.rossa-tabs-on .vr-balance__label {
  font: 700 10.5px/1 var(--rossa-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rossa-muted);
}
body.rossa-tabs-on .vr-balance__state { font: 700 22px/1.1 var(--rossa-font); color: var(--rossa-ink); }
body.rossa-tabs-on .vr-balance__state--green { color: var(--rossa-green); }
body.rossa-tabs-on .vr-balance__state--coral { color: var(--rossa-coral); }
body.rossa-tabs-on .vr-balance__state--red   { color: var(--rossa-red); }
body.rossa-tabs-on .vr-balance__state--teal  { color: var(--rossa-teal); }
body.rossa-tabs-on .vr-balance__state--soft  { color: var(--rossa-petrol); }
body.rossa-tabs-on .vr-balance__sub { font: 400 13px/1.2 var(--rossa-font); color: var(--rossa-muted); }
body.rossa-tabs-on .vr-balance__total { font: 700 24px/1.1 var(--rossa-font); color: var(--rossa-ink); }
body.rossa-tabs-on .vr-balance__due { font: 700 12px/1.2 var(--rossa-font); color: var(--rossa-coral); }

/* "Marcar como": etiqueta + botones en fila limpia.
   flex:0 0 auto anula el flex-basis 340px heredado de .rossa-ctr__btn-status
   (que en columna se traducía en 340px de ALTO = el "río" vacío). */
body.rossa-tabs-on .vr-marcar { margin: 0 0 8px; flex: 0 0 auto !important; height: auto !important; }
body.rossa-tabs-on .vr-marcar__label {
  flex: 0 0 100%;
  margin: 0 0 4px;
  font: 700 12px/1 var(--rossa-font);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rossa-teal);
}
body.rossa-tabs-on .vr-marcar__label i { color: var(--rossa-muted); margin-right: 4px; }

/* --- Pagos: Cargos + lista de Pagos a TODO el ancho (no apretado a la izq) --- */
body.rossa-tabs-on #bloque-pagos .rossa-ctr__payment-try,
body.rossa-tabs-on #bloque-pagos .rossa-payment-attempts,
body.rossa-tabs-on #bloque-pagos .rossa-payment-attempts__summary,
body.rossa-tabs-on #bloque-pagos .rossa-payment-attempts__body,
body.rossa-tabs-on #bloque-pagos .rossa-payment-attempts-item,
body.rossa-tabs-on #bloque-pagos .rossa-ctr__tipo-facturacion,
body.rossa-tabs-on #bloque-pagos .rossa-ctr__bill {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}
/* footer del componente: acciones a la izquierda, totales a la derecha */
body.rossa-tabs-on #bloque-pagos .rossa-payment-attempts__footer {
  grid-template-columns: 1fr minmax(280px, 360px);
  align-items: start;
  gap: 18px 24px;
  width: 100%;
}
body.rossa-tabs-on #bloque-pagos .rossa-payment-attempts__summary { width: 100%; }
/* Cargos: "Forma de pago preferida" como fila que respira y observaciones a ancho */
body.rossa-tabs-on #bloque-pagos .rossa-ctr__tipo-facturacion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
@media (max-width: 760px){
  body.rossa-tabs-on #bloque-pagos .rossa-payment-attempts__footer { grid-template-columns: 1fr; }
}

/*=============================================================================
  41. SCREEN: Calendario de ocupación (admin/ocupacion.php)
  ---------------------------------------------------------------------------
  Flat Rossa chrome: filter bar, action toolbar, legend card, occupancy grid.
  Status cell colors keep semantics; chrome uses design tokens.
=============================================================================*/
#contenido_admin.rossa-ocupacion-page {
  font-family: var(--rossa-font);
  color: var(--rossa-ink);
}

/* --- Filtro establecimiento ------------------------------------------------ */
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-filters.rossa-establecimiento-filter-bar {
  margin: 0 0 16px;
}

#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-filter-form.rossa-establecimiento-filter-form {
  gap: 12px 14px;
}

#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-filter-submit {
  margin: 0;
}

/* --- Toolbar + leyenda ----------------------------------------------------- */
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-actions--legend-only {
  gap: 0;
}
/* Aplanamos toolbar + calendar-tools para que los 4 botones queden en una fila */
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-actions .rossa-ocupacion-toolbar,
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-actions .rossa-ocupacion-calendar-tools {
  display: contents;
}
/* Los 4 botones uniformes: misma altura, texto en una línea, uno tras otro */
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-actions .admin_boton,
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-actions .rossa-btn {
  flex: 0 0 auto;
  height: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0 16px;
  box-sizing: border-box;
  font-size: 12px;
  margin: 0;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-toolbar,
#contenido_admin.rossa-ocupacion-page .add_booking.rossa-ocupacion-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  float: none;
  margin: 0;
  width: 100%;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-toolbar .admin_boton {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  text-align: center;
  box-sizing: border-box;
}
#contenido_admin.rossa-ocupacion-page #legend.rossa-ocupacion-legend {
  float: none !important;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0 !important;
  margin-top: 0 !important;
  padding: 10px 14px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-shadow: none;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-legend__toggle {
  display: none;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-legend__body {
  display: block;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-legend__title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rossa-muted);
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-legend__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--rossa-ink);
}
#contenido_admin.rossa-ocupacion-page #legend .leyenda {
  display: inline-block;
  flex-shrink: 0;
  width: 22px;
  min-width: 22px;
  height: 16px;
  border-radius: 3px;
  padding: 0;
  box-sizing: border-box;
}

/* Mensajes AJAX + barra de herramientas del calendario */
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-response[hidden] {
  display: none !important;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-response:not([hidden]) {
  display: block;
  margin: 0 0 12px;
  padding: 10px 12px;
  max-width: 100%;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-calendar-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 12px;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-linear-calendar {
  font-size: 12px;
  padding: 6px 12px;
  white-space: nowrap;
  text-decoration: none;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-toggle-past {
  font-size: 12px;
  padding: 6px 12px;
  white-space: nowrap;
}
/* Calendario lineal + Mostrar días pasados = verde fuerte (!important para vencer
   al relleno teal de .rossa-btn) */
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-linear-calendar,
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-toggle-past {
  background: var(--rossa-green) !important;
  border: 1px solid var(--rossa-green) !important;
  color: var(--rossa-white) !important;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-linear-calendar:hover,
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-toggle-past:hover {
  background: #13876c !important;
  border-color: #13876c !important;
  color: var(--rossa-white) !important;
}
/* Reservar / Cerrar seleccionadas deshabilitados = gris claro (Figma) */
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-toolbar .admin_boton[disabled],
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-toolbar .admin_boton:disabled {
  background: var(--rossa-surface);
  border: 1px solid var(--rossa-border);
  color: var(--rossa-muted);
  cursor: not-allowed;
  opacity: 1;
}

@media (min-width: 901px) {
  #contenido_admin.rossa-ocupacion-page #legend.rossa-ocupacion-legend.is-collapsed .rossa-ocupacion-legend__body {
    display: block;
  }
}

@media (min-width: 1024px) {
  #contenido_admin.rossa-ocupacion-page .rossa-ocupacion-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 20px;
  }
  #contenido_admin.rossa-ocupacion-page .rossa-ocupacion-toolbar,
  #contenido_admin.rossa-ocupacion-page .add_booking.rossa-ocupacion-toolbar {
    flex: 0 1 auto;
    width: auto;
    max-width: 420px;
  }
  #contenido_admin.rossa-ocupacion-page #legend.rossa-ocupacion-legend {
    flex: 1 1 280px;
  }
}

/* --- Calendario grid ------------------------------------------------------- */
#contenido_admin.rossa-ocupacion-page #calendario_ocupacion.rossa-ocupacion-calendar {
  margin-top: 32px;
  overflow-x: visible;
  max-width: 100%;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 10px;
  margin-bottom: 8px;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario td {
  box-sizing: border-box;
  vertical-align: top;
  overflow: hidden;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .nocupacion {
  width: 100% !important;
  max-width: 100%;
  margin: 4px 0 0;
  box-sizing: border-box;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .nocupacion td {
  box-sizing: border-box;
  word-break: break-word;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .contdiaocu--empty,
#contenido_admin.rossa-ocupacion-page .tablacalendario .rossa-ocupacion-contdiaocu--empty {
  display: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .contdiaocu--filled,
#contenido_admin.rossa-ocupacion-page .tablacalendario .rossa-ocupacion-contdiaocu--filled {
  min-height: 2.5rem;
}
#contenido_admin.rossa-ocupacion-page #calendario_ocupacion.rossa-ocupacion-past-collapsed .tablacalendario td.diavalido.pasado:not(.rossa-ocupacion-day-expanded) .rossa-ocupacion-contdiaocu--filled {
  min-height: 0;
  padding: 0;
}
/* Días pasados: lydia.css los oculta siempre — aquí los gobierna el toggle */
#contenido_admin.rossa-ocupacion-page #calendario_ocupacion:not(.rossa-ocupacion-past-collapsed) .tablacalendario td.diavalido.pasado .contdiaocu:not(.rossa-ocupacion-contdiaocu--empty) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto;
}
#contenido_admin.rossa-ocupacion-page #calendario_ocupacion.rossa-ocupacion-past-collapsed .tablacalendario td.diavalido.pasado .contdiaocu {
  display: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
#contenido_admin.rossa-ocupacion-page #calendario_ocupacion.rossa-ocupacion-past-collapsed .tablacalendario td.diavalido.pasado.rossa-ocupacion-day-expanded .contdiaocu:not(.rossa-ocupacion-contdiaocu--empty) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto;
  min-height: 0;
  padding: 6px !important;
  margin: 0;
  border: 0;
  border-radius: 0 0 var(--rossa-radius) var(--rossa-radius);
  background: var(--rossa-surface);
}
#contenido_admin.rossa-ocupacion-page #calendario_ocupacion.rossa-ocupacion-past-collapsed .tablacalendario td.diavalido.pasado.rossa-ocupacion-day-expanded .rossa-ocupacion-contdiaocu--filled {
  min-height: 2.5rem;
  padding: 6px;
}
#contenido_admin.rossa-ocupacion-page #calendario_ocupacion.rossa-ocupacion-past-collapsed .tablacalendario td.diavalido.pasado:has(.rossa-ocupacion-contdiaocu--filled) .numerodia {
  cursor: pointer;
}
/* Día pasado desplegado (manual O por botón): pastilla pegada a la card, esquinas
   superiores redondeadas */
#contenido_admin.rossa-ocupacion-page #calendario_ocupacion.rossa-ocupacion-past-collapsed .tablacalendario td.diavalido.pasado.rossa-ocupacion-day-expanded .numerodia,
#contenido_admin.rossa-ocupacion-page #calendario_ocupacion:not(.rossa-ocupacion-past-collapsed) .tablacalendario td.diavalido.pasado:has(.nocupacion) .numerodia {
  border-radius: var(--rossa-radius) var(--rossa-radius) 0 0;
  margin-bottom: 0;
  box-shadow: none;
}
#contenido_admin.rossa-ocupacion-page #calendario_ocupacion.rossa-ocupacion-past-collapsed .tablacalendario td.diavalido.pasado {
  padding: 2px;
  vertical-align: top;
}
#contenido_admin.rossa-ocupacion-page #calendario_ocupacion.rossa-ocupacion-past-collapsed .tablacalendario td.diavalido.pasado:not(.rossa-ocupacion-day-expanded) .numerodia {
  border-radius: var(--rossa-radius);
  margin-bottom: 0;
}
/* Cabecera mes/año — barra de navegación */
#contenido_admin.rossa-ocupacion-page .tablacalendario > tbody > tr:first-child > td.tit {
  background: transparent !important;
  color: var(--rossa-ink);
  border: 0;
  border-radius: 0;
  padding: 0 0 14px;
  text-transform: none;
  overflow: visible;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario > tbody > tr:first-child > td.tit > table {
  width: auto;
  margin: 0 auto;
  border-collapse: collapse;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .titmesano {
  background: transparent !important;
  color: var(--rossa-navy);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  padding: 4px 8px;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .messiguiente,
#contenido_admin.rossa-ocupacion-page .tablacalendario .mesanterior {
  width: auto;
  white-space: nowrap;
  vertical-align: middle;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .titmesano {
  vertical-align: middle;
}
/* Flechas pegadas al mes, sin recuadro */
#contenido_admin.rossa-ocupacion-page .tablacalendario .messiguiente a,
#contenido_admin.rossa-ocupacion-page .tablacalendario .mesanterior a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: auto;
  padding: 0 4px;
  font-size: 18px;
  color: var(--rossa-teal);
  background: transparent;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  transition: color .15s ease;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .messiguiente a:hover,
#contenido_admin.rossa-ocupacion-page .tablacalendario .mesanterior a:hover {
  background: transparent;
  color: var(--rossa-petrol-dark);
}
/* Fila días de la semana */
#contenido_admin.rossa-ocupacion-page .tablacalendario > tbody > tr:nth-child(2) > td.diasemana {
  background: var(--rossa-surface) !important;
  color: var(--rossa-muted) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 0;
  border-top: 1px solid var(--rossa-border);
  border-bottom: 1px solid var(--rossa-border);
  border-radius: 0;
  padding: 10px 4px;
  height: auto;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario > tbody > tr:nth-child(2) > td.diasemana:first-child {
  border-left: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius) 0 0 var(--rossa-radius);
}
#contenido_admin.rossa-ocupacion-page .tablacalendario > tbody > tr:nth-child(2) > td.diasemana:last-child {
  border-right: 1px solid var(--rossa-border);
  border-radius: 0 var(--rossa-radius) var(--rossa-radius) 0;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .diasemana span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .tit {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .diainvalido {
  background: var(--rossa-surface);
  border-radius: var(--rossa-radius);
  opacity: .55;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .diavalido {
  padding: 4px;
  vertical-align: top;
  text-transform: none;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .diavalido:not(.pasado) .contdiaocu {
  border: 1px solid var(--rossa-border);
  border-top: 0;
  border-radius: 0 0 var(--rossa-radius) var(--rossa-radius);
  background: var(--rossa-white);
  padding: 6px;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .pasado .contdiaocu {
  background: var(--rossa-surface);
  border: 0;
  border-radius: 0 0 var(--rossa-radius) var(--rossa-radius);
  padding: 6px;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .numerodia {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 4px 3px;
  background: var(--rossa-teal);
  color: var(--rossa-white);
  border-radius: var(--rossa-radius);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .numerodia .rossa-ocupacion-day__num {
  display: inline;
  font-size: 12px;
  font-weight: 700;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .numerodia .rossa-ocupacion-day__month {
  display: inline;
  font-size: 11px;
  font-weight: 700;
  opacity: 1;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .diavalido.pasado .numerodia {
  background: var(--rossa-surface);
  color: #4a555b;
}
/* HOY: pastilla verde fuerte */
#contenido_admin.rossa-ocupacion-page .tablacalendario .diavalido.hoy .numerodia {
  background: var(--rossa-green);
  color: var(--rossa-white);
}
/* Días futuros: pastilla verde claro */
#contenido_admin.rossa-ocupacion-page .tablacalendario .diavalido:not(.pasado):not(.hoy) .numerodia {
  background: rgba(25, 172, 138, .16);
  color: #0f7d63;
}
/* La card de habitaciones toma el tono de su fecha */
#contenido_admin.rossa-ocupacion-page .tablacalendario .diavalido.hoy .contdiaocu {
  background: rgba(25, 172, 138, .09);
  border-color: rgba(25, 172, 138, .38);
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .diavalido:not(.pasado):not(.hoy) .contdiaocu {
  background: rgba(25, 172, 138, .045);
  border-color: rgba(25, 172, 138, .22);
}
/* Día plegado (hoy/futuro): se oculta la card y queda solo la pastilla */
#contenido_admin.rossa-ocupacion-page .tablacalendario td.diavalido.rossa-ocupacion-day-collapsed .contdiaocu {
  display: none;
}
/* Chevron desplegable en la pastilla (solo días con habitaciones).
   ▾ = plegado (por defecto) ; ▴ = desplegado. */
#contenido_admin.rossa-ocupacion-page .tablacalendario .numerodia::after { content: none; }
/* Chevron de plegado SOLO en días pasados (hoy y futuros no se pliegan) */
#contenido_admin.rossa-ocupacion-page .tablacalendario .diavalido.pasado:has(.nocupacion) .numerodia {
  padding-left: 18px;
  padding-right: 18px;
  cursor: pointer;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .diavalido.pasado:has(.nocupacion) .numerodia::after {
  content: "\25BE";
  width: auto;
  height: auto;
  border: 0;
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8px;
  line-height: 1;
  color: currentColor;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .diavalido.pasado.rossa-ocupacion-day-expanded:has(.nocupacion) .numerodia::after,
#contenido_admin.rossa-ocupacion-page #calendario_ocupacion:not(.rossa-ocupacion-past-collapsed) .tablacalendario .diavalido.pasado:has(.nocupacion) .numerodia::after {
  content: "\25B4";
}
/* Pastilla desplegada: solo esquinas superiores redondeadas (se pega a la card) */
#contenido_admin.rossa-ocupacion-page .tablacalendario .diavalido.pasado.rossa-ocupacion-day-expanded:has(.nocupacion) .numerodia,
#contenido_admin.rossa-ocupacion-page .tablacalendario .diavalido:not(.pasado):not(.rossa-ocupacion-day-collapsed):has(.nocupacion) .numerodia {
  border-radius: var(--rossa-radius) var(--rossa-radius) 0 0;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .findes {
  outline: 2px solid rgba(23, 121, 155, .35);
  outline-offset: -2px;
  border-radius: var(--rossa-radius);
}
#contenido_admin.rossa-ocupacion-page .nocupacion {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  margin: 4px auto;
}
#contenido_admin.rossa-ocupacion-page .tablacalendario .nocupacion td {
  padding: 1px 0;
  box-sizing: border-box;
  word-break: break-word;
}
#contenido_admin.rossa-ocupacion-page .cabocu {
  background: transparent;
  color: var(--rossa-ink);
  border-radius: 0;
  border-bottom: 1px solid var(--rossa-border);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  padding: 7px 6px 8px;
  height: auto;
}
#contenido_admin.rossa-ocupacion-page .pasado .cabocu {
  background: transparent;
  color: var(--rossa-ink);
}
/* Precio del día = badge naranja centrado bajo el título */
#contenido_admin.rossa-ocupacion-page .cont_precios_ocupacion {
  display: block;
  text-align: center;
  margin-top: 5px;
}
#contenido_admin.rossa-ocupacion-page .nomhab {
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 12.5px !important;
  font-weight: 600;
  color: #000000;
  min-height: 0;
  height: 38px;
  padding: 6px;
  box-sizing: border-box;
  vertical-align: middle !important;
  text-align: center;
}
#contenido_admin.rossa-ocupacion-page .nomhab a {
  color: #000000;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-contdiaocu--filled .nomhab,
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-contdiaocu--filled .nomhab a,
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-contdiaocu--filled .nomhab.nocupada,
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-contdiaocu--filled .nomhab.npagado,
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-contdiaocu--filled .nomhab.nsemipagado,
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-contdiaocu--filled .nomhab.pagorecep,
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-contdiaocu--filled .nomhab.ncerrada,
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-contdiaocu--filled .nomhab.nlibre,
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-contdiaocu--filled .nomhab.nseleccionada {
  color: #000000 !important;
}

/* Estados de celda — semántica conservada, tokens Rossa */
#contenido_admin.rossa-ocupacion-page .nlibre {
  background: #f2f2f2;   /* libre */
  color: var(--rossa-ink);
  border-color: #f2f2f2;
}
#contenido_admin.rossa-ocupacion-page .nocupada {
  background: #ef8c71;   /* ocupado */
  border-color: #ef8c71;
  color: var(--rossa-white);
}
#contenido_admin.rossa-ocupacion-page .npagado {
  background: #9ecf62;   /* pagado */
  border-color: #9ecf62;
  color: var(--rossa-white);
}
#contenido_admin.rossa-ocupacion-page .nsemipagado {
  background: #fab511;   /* pendiente de pago */
  border-color: #fab511;
  color: var(--rossa-ink);
}
#contenido_admin.rossa-ocupacion-page .pagorecep {
  background: #b8990b;
  border-color: #b8990b;
  color: var(--rossa-white);
}
#contenido_admin.rossa-ocupacion-page .ncerrada {
  background: #a9a9a9;   /* cerrada */
  border-color: #a9a9a9;
  color: var(--rossa-white);
}
#contenido_admin.rossa-ocupacion-page .nseleccionada {
  background: #bbe1f2 !important;   /* seleccionada; !important vence al azul fuerte de lydia.css */
  border-color: #bbe1f2 !important;
  color: var(--rossa-ink);
}
#contenido_admin.rossa-ocupacion-page .preocu {
  display: inline-block;
  background: #f5a623;
  color: var(--rossa-white);
  border-radius: var(--rossa-radius-pill);
  font-weight: 700;
  font-size: 12px;
  padding: 2px 12px;
}
#contenido_admin.rossa-ocupacion-page .parkocu {
  background: var(--rossa-cyan);
  color: var(--rossa-white);
  border-radius: 4px;
}
#contenido_admin.rossa-ocupacion-page .precioresocu {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  color: var(--rossa-ink);
  border-radius: 4px;
}

/* Formulario ir a mes/año */
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-month-form {
  margin: 24px auto 8px;
  max-width: 420px;
  padding: 16px 18px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-month-form__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 12px;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-month-form__field {
  width: 50%;
  padding: 0 8px;
  vertical-align: top;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-month-form__label {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rossa-muted);
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-month-form__select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-family: var(--rossa-font);
  font-size: 14px;
  color: var(--rossa-ink);
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  cursor: pointer;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-month-form__select:focus {
  outline: none;
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 2px rgba(0, 94, 102, .15);
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-month-form__actions {
  padding-top: 4px;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-month-form__submit {
  margin: 0;
  min-width: 160px;
}

#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-filters .rossa-ocupacion-month-form {
  margin: 0;
  padding: 0;
  max-width: none;
  background: none;
  border: 0;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-filters .rossa-ocupacion-month-form__table,
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-filters .rossa-ocupacion-month-form__table tbody,
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-filters .rossa-ocupacion-month-form__table tr {
  display: flex;
  align-items: center;
  gap: 12px 14px;
  flex-wrap: wrap;
  width: auto;
  border-spacing: 0;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-filters .rossa-ocupacion-month-form__field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  padding: 0;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-filters .rossa-ocupacion-month-form__label {
  margin: 0;
  white-space: nowrap;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-filters .rossa-ocupacion-month-form__select {
  width: auto;
  min-width: 140px;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-filters .rossa-ocupacion-month-form__actions {
  padding: 0;
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-filters .rossa-ocupacion-month-form__submit {
  min-width: 0;
}

/* Llegada / salida — corte triangular REAL en el bloque (sin icono): se recorta
   la esquina del propio <td> con clip-path dejando ver el fondo blanco de la
   tabla (corte de verdad, sin overlay ni borde). Falta arriba-izquierda = día de
   llegada, abajo-derecha = día de salida; un día de rotación (llegada+salida)
   recorta ambas esquinas. El color de ocupación sigue en el <td>. */
#contenido_admin.rossa-ocupacion-page .nomhab.inicio,
#contenido_admin.rossa-ocupacion-page .nomhab.final {
  position: relative;
  overflow: hidden;
  filter: none;
  padding-left: 2px;
  padding-right: 2px;
}
/* el número nunca envuelve (en celdas estrechas de portátil quedaba en 2 líneas) */
#contenido_admin.rossa-ocupacion-page .nomhab a {
  white-space: nowrap;
}
/* El corte se dibuja como un pseudo del color del fondo (blanco) sobre la esquina,
   con ancho FIJO (24px): se ve igual de discreto en la celda estrecha de escritorio
   y en la barra ancha de móvil, y —al no clipear el <td>— el número de habitación
   queda SIEMPRE por encima del recorte (antes, con clip-path en el td, se cortaba
   el número en pantallas pequeñas). Un día de rotación (inicio+final) recorta
   ambas esquinas (::before + ::after). */
#contenido_admin.rossa-ocupacion-page .nomhab.inicio > *,
#contenido_admin.rossa-ocupacion-page .nomhab.final > * {
  position: relative;
  z-index: 2;
}
#contenido_admin.rossa-ocupacion-page .nomhab.inicio::before,
#contenido_admin.rossa-ocupacion-page .nomhab.final::after {
  content: "";
  position: absolute;
  inset: -2px;            /* sobresale 2px; overflow:hidden lo recorta a ras y así
                             cubre el píxel del borde superior/derecho */
  background: #fff;
  z-index: 1;
  pointer-events: none;
  font-family: inherit;
}
/* llegada: recorte (triángulo blanco) en la esquina inferior-izquierda */
#contenido_admin.rossa-ocupacion-page .nomhab.inicio::before {
  clip-path: polygon(0 0, 0 100%, 24px 100%);
}
/* salida: recorte en la esquina superior-derecha */
#contenido_admin.rossa-ocupacion-page .nomhab.final::after {
  clip-path: polygon(calc(100% - 24px) 0, 100% 0, 100% 100%);
}

/* Leyenda: swatches de ejemplo con el mismo corte real (llegada der / salida izq) */
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-legend .leyenda.rossa-leg-llegada,
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-legend .leyenda.rossa-leg-salida {
  background: var(--rossa-ink) !important;   /* bloque de ejemplo en negro */
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-legend .leyenda.rossa-leg-llegada {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 45% 100%);
}
#contenido_admin.rossa-ocupacion-page .rossa-ocupacion-legend .leyenda.rossa-leg-salida {
  clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%);
}
#contenido_admin.rossa-ocupacion-page .nomhab.nocupada.inicio,
#contenido_admin.rossa-ocupacion-page .nomhab.nocupada.final,
#contenido_admin.rossa-ocupacion-page .nomhab.nocupada.inicio.final {
  background: #ef8c71;
  border-color: #ef8c71;
}
#contenido_admin.rossa-ocupacion-page .nomhab.npagado.inicio,
#contenido_admin.rossa-ocupacion-page .nomhab.npagado.final,
#contenido_admin.rossa-ocupacion-page .nomhab.npagado.inicio.final {
  background: #9ecf62;
  border-color: #9ecf62;
}
#contenido_admin.rossa-ocupacion-page .nomhab.nsemipagado.inicio,
#contenido_admin.rossa-ocupacion-page .nomhab.nsemipagado.final,
#contenido_admin.rossa-ocupacion-page .nomhab.nsemipagado.inicio.final {
  background: #fab511;
  border-color: #fab511;
}
#contenido_admin.rossa-ocupacion-page .nomhab.pagorecep.inicio,
#contenido_admin.rossa-ocupacion-page .nomhab.pagorecep.final,
#contenido_admin.rossa-ocupacion-page .nomhab.pagorecep.inicio.final {
  background: #b8990b;
  border-color: #b8990b;
}
#contenido_admin.rossa-ocupacion-page .nomhab.ncerrada.inicio,
#contenido_admin.rossa-ocupacion-page .nomhab.ncerrada.final,
#contenido_admin.rossa-ocupacion-page .nomhab.ncerrada.inicio.final {
  background: #a9a9a9;
  border-color: #a9a9a9;
}
/* Día llegada / salida en la leyenda = solo el icono (sin caja) + el texto */
#contenido_admin.rossa-ocupacion-page #legend .degra.leyenda,
#contenido_admin.rossa-ocupacion-page #legend .degra_inverso.leyenda {
  position: static;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
  width: auto;
  min-width: 0;
  height: auto;
  filter: none;
}
#contenido_admin.rossa-ocupacion-page #legend .degra.leyenda::before,
#contenido_admin.rossa-ocupacion-page #legend .degra_inverso.leyenda::after {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  position: static;
  width: auto;
  height: auto;
  line-height: 1;
  font-size: 13px;
  color: var(--rossa-ink);
  background: none;
}
#contenido_admin.rossa-ocupacion-page #legend .degra.leyenda::before {
  content: "\f2f6";   /* entrada */
}
#contenido_admin.rossa-ocupacion-page #legend .degra_inverso.leyenda::after {
  content: "\f2f5";   /* salida */
}

@media (max-width: 900px) {
  #contenido_admin.rossa-ocupacion-page {
    overflow-x: hidden;
  }
  #contenido_admin.rossa-ocupacion-page #calendario_ocupacion.rossa-ocupacion-calendar {
    overflow-x: visible;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  #contenido_admin.rossa-ocupacion-page .rossa-ocupacion-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  #contenido_admin.rossa-ocupacion-page .rossa-ocupacion-toolbar .admin_boton {
    width: 100%;
    flex: 1 1 auto;
    box-sizing: border-box;
    text-align: center;
  }
  #contenido_admin.rossa-ocupacion-page #legend.rossa-ocupacion-legend {
    float: none !important;
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto !important;
    margin-top: 0 !important;
    padding: 10px 12px;
    box-sizing: border-box;
  }
  #contenido_admin.rossa-ocupacion-page .rossa-ocupacion-legend__body {
    text-align: center;
  }
  #contenido_admin.rossa-ocupacion-page .rossa-ocupacion-legend__toggle {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 12px;
    padding: 6px 12px;
    margin: 0;
  }
  #contenido_admin.rossa-ocupacion-page .rossa-ocupacion-legend.is-collapsed .rossa-ocupacion-legend__body {
    display: none;
  }
  #contenido_admin.rossa-ocupacion-page .rossa-ocupacion-legend.is-collapsed {
    padding-bottom: 10px;
  }
  #contenido_admin.rossa-ocupacion-page .rossa-ocupacion-legend:not(.is-collapsed) .rossa-ocupacion-legend__title {
    display: none;
  }
  #contenido_admin.rossa-ocupacion-page .rossa-ocupacion-legend__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 14px;
    margin-top: 10px;
  }
  #contenido_admin.rossa-ocupacion-page .rossa-ocupacion-legend__item {
    justify-content: center;
  }
  #contenido_admin.rossa-ocupacion-page .rossa-ocupacion-calendar-tools {
    justify-content: stretch;
  }
  #contenido_admin.rossa-ocupacion-page .rossa-ocupacion-linear-calendar,
  #contenido_admin.rossa-ocupacion-page .rossa-ocupacion-toggle-past {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
  /* Rejilla del mes -> lista vertical de días (una tarjeta por día) */
  #contenido_admin.rossa-ocupacion-page .tablacalendario {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-spacing: 0;
    font-size: 13px;
  }
  #contenido_admin.rossa-ocupacion-page .tablacalendario > tbody,
  #contenido_admin.rossa-ocupacion-page .tablacalendario > tbody > tr {
    display: block;
    width: 100%;
  }
  #contenido_admin.rossa-ocupacion-page .tablacalendario td {
    height: auto;
  }
  /* cabecera de días de la semana y días de relleno: fuera en móvil */
  #contenido_admin.rossa-ocupacion-page .tablacalendario .diasemana,
  #contenido_admin.rossa-ocupacion-page .tablacalendario .diainvalido {
    display: none !important;
  }
  /* título del mes a ancho completo */
  #contenido_admin.rossa-ocupacion-page .tablacalendario .tit {
    display: block;
    width: 100%;
  }
  /* cada día válido = tarjeta a ancho completo, apilada verticalmente */
  #contenido_admin.rossa-ocupacion-page .tablacalendario td.diavalido {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 4px;
    margin: 0 0 12px;
    vertical-align: top;
  }
  /* las habitaciones conservan su rejilla compacta dentro de la tarjeta */
  #contenido_admin.rossa-ocupacion-page .tablacalendario .nocupacion {
    width: 100%;
  }
  #contenido_admin.rossa-ocupacion-page .tablacalendario .numerodia {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 6px 3px;
    text-align: center;
    white-space: nowrap;
  }
  #contenido_admin.rossa-ocupacion-page .tablacalendario .numerodia .rossa-ocupacion-day__num {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }
  /* móvil: mostrar el mes también -> fecha completa "1 DE JULIO" (mayús + negrita) */
  #contenido_admin.rossa-ocupacion-page .tablacalendario .numerodia .rossa-ocupacion-day__month {
    display: inline;
  }
  #contenido_admin.rossa-ocupacion-page .tablacalendario .diavalido:not(.pasado) .contdiaocu,
  #contenido_admin.rossa-ocupacion-page .tablacalendario .pasado .rossa-ocupacion-contdiaocu--filled {
    padding: 3px;
  }
  #contenido_admin.rossa-ocupacion-page .tablacalendario > tbody > tr:nth-child(2) > td.diasemana {
    font-size: 10px;
    font-weight: 700;
    padding: 6px 0;
  }
  #contenido_admin.rossa-ocupacion-page .tablacalendario > tbody > tr:nth-child(2) > td.diasemana:first-child {
    border-left: 1px solid var(--rossa-border);
    border-radius: var(--rossa-radius) 0 0 var(--rossa-radius);
  }
  #contenido_admin.rossa-ocupacion-page .tablacalendario > tbody > tr:nth-child(2) > td.diasemana:last-child {
    border-right: 1px solid var(--rossa-border);
    border-radius: 0 var(--rossa-radius) var(--rossa-radius) 0;
  }
  #contenido_admin.rossa-ocupacion-page .nomhab {
    font-size: 13px !important;
    min-height: 40px;    /* altura mínima táctil, igual para libres y ocupadas */
    display: flex;
    flex-wrap: wrap;     /* los iconos de servicio bajan a una 2ª línea */
    align-items: center;
    justify-content: center;
    align-content: center;
    padding: 8px 4px;
    line-height: 1.3;
  }
  #contenido_admin.rossa-ocupacion-page .nomhab > a { flex: 0 0 100%; }
  #contenido_admin.rossa-ocupacion-page .nomhab > i {
    flex: 0 0 auto;
    margin: 2px 3px 0;
  }
  #contenido_admin.rossa-ocupacion-page .cabocu {
    font-size: 12px !important;
    padding: 4px 3px;
  }
  #contenido_admin.rossa-ocupacion-page .nocupacion {
    margin: 2px auto;
  }
  /* 3 habitaciones por fila: el DOM ya viene en filas de 3, pero al hacer
     flex los td dejaban de ser celdas y se apilaban de uno en uno. La tabla
     pasa a grid y tbody/tr se disuelven para que los td sean items. */
  #contenido_admin.rossa-ocupacion-page .tablacalendario table.nocupacion {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  #contenido_admin.rossa-ocupacion-page .tablacalendario table.nocupacion > tbody,
  #contenido_admin.rossa-ocupacion-page .tablacalendario table.nocupacion > tbody > tr {
    display: contents;
  }
  #contenido_admin.rossa-ocupacion-page .tablacalendario table.nocupacion .cabocu {
    grid-column: 1 / -1;
  }
  /* Alojamiento de UNA sola habitación: la celda ocupa la fila entera en vez de
     un tercio, para que el nombre y los iconos de servicio quepan dentro.
     Se detecta por el <tr> con una única celda de habitación (el tr se disuelve
     con display:contents, así que el grid-column va en el td). */
  #contenido_admin.rossa-ocupacion-page .tablacalendario table.nocupacion > tbody > tr > td.nomhab:only-child {
    grid-column: 1 / -1;
  }
  #contenido_admin.rossa-ocupacion-page .rossa-ocupacion-month-form {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 480px) {
  #contenido_admin.rossa-ocupacion-page .rossa-ocupacion-legend__list {
    flex-direction: column;
    align-items: center;
  }
}

/* =============================================================================
   32. PESTAÑA RESUMEN (ver_reserva) — dashboard de tarjetas
   Rejilla de tarjetas .vr-section (cliente / fechas / reserva + una por
   habitación). Reusa el panel .vr-section y la rejilla clave-valor .vr-kv,
   pero a 2 columnas dentro de cada tarjeta (las tarjetas son estrechas).
   ========================================================================== */
/* Dos rejillas: info (cliente/fechas/reserva) y habitaciones, separadas por
   una línea. align-items:stretch -> todas las tarjetas de una fila igualan
   altura. */
body.rossa-tabs-on #bloque-resumen .vr-resumen__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
body.rossa-tabs-on #bloque-resumen .vr-resumen__grid > .vr-section { margin: 0; height: 100%; }
/* código de llave/PIN monoespaciado (Resumen y tab Llaves) */
body.rossa-tabs-on .vr-key {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--rossa-ink);
}
body.rossa-tabs-on .vr-key-type { color: var(--rossa-muted); font-size: 12px; }
body.rossa-tabs-on #bloque-resumen .vr-keys .vr-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body.rossa-tabs-on #bloque-resumen .vr-key-copy {
  border: 0;
  background: none;
  color: var(--rossa-muted);
  cursor: pointer;
  padding: 0 2px;
  margin-left: 6px;
  font-size: 12px;
  vertical-align: middle;
}
body.rossa-tabs-on #bloque-resumen .vr-key-copy:hover { color: var(--rossa-teal); }
body.rossa-tabs-on #bloque-resumen .vr-key-copy.is-copied { color: var(--rossa-green); }
/* separador entre las 3 tarjetas de cabecera y las habitaciones: NO a ancho
   completo (≈del centro de la 1ª card al centro de la última, centrado) y con
   el doble de margen vertical respecto a las cards. */
body.rossa-tabs-on #bloque-resumen .vr-resumen__sep {
  width: 60%;
  height: 1px;
  border: 0;
  background: var(--rossa-border);
  margin: 48px auto;
}
/* kv a 2 columnas (la tarjeta es ~1/3 del ancho). minmax(0,1fr)+min-width:0 en
   la celda: la columna puede encoger por debajo de su contenido, así el texto
   largo (fechas con hora) baja de línea en vez de salirse de la tarjeta. */
body.rossa-tabs-on #bloque-resumen .vr-kv {
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 18px;
}
body.rossa-tabs-on #bloque-resumen .vr-kv__cell { min-width: 0; }
body.rossa-tabs-on #bloque-resumen .vr-kv__value { white-space: normal; }
/* sublínea (precio por noche) */
body.rossa-tabs-on #bloque-resumen .vr-kv__sub {
  display: inline-block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--rossa-muted);
}
/* badges de estado dentro del Resumen = chips suaves: fondo tintado + texto
   del color + punto. */
body.rossa-tabs-on #bloque-resumen .vr-kv__value .rossa-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  padding: 4px 11px;
  background-color: var(--rossa-surface-2);
  color: var(--rossa-muted);
  border: 1px solid var(--rossa-border);
}
body.rossa-tabs-on #bloque-resumen .vr-kv__value .rossa-tag::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
body.rossa-tabs-on #bloque-resumen .vr-kv__value .rossa-tag--teal  { background-color: rgba(0, 94, 102, .09);   color: var(--rossa-teal);  border-color: rgba(0, 94, 102, .22); }
body.rossa-tabs-on #bloque-resumen .vr-kv__value .rossa-tag--green { background-color: rgba(25, 172, 138, .12); color: var(--rossa-green); border-color: rgba(25, 172, 138, .30); }
body.rossa-tabs-on #bloque-resumen .vr-kv__value .rossa-tag--coral { background-color: rgba(234, 92, 54, .12);  color: var(--rossa-coral); border-color: rgba(234, 92, 54, .30); }
body.rossa-tabs-on #bloque-resumen .vr-kv__value .rossa-tag--red   { background-color: rgba(231, 0, 76, .09);   color: var(--rossa-red);   border-color: rgba(231, 0, 76, .24); }
body.rossa-tabs-on #bloque-resumen .vr-kv__value .rossa-tag--soft  { background-color: var(--rossa-surface-2);  color: var(--rossa-muted); border-color: var(--rossa-border); }

/* El texto largo baja la palabra ENTERA a la siguiente línea; solo se parte si una
   sola palabra excede el ancho de la celda (evita cortes a media palabra >50%). */
body.rossa-tabs-on #bloque-resumen .vr-kv__value,
body.rossa-tabs-on #bloque-resumen .vr-kv__label,
body.rossa-tabs-on #bloque-resumen .vr-origin-name { overflow-wrap: break-word; word-break: normal; hyphens: none; }

@media (max-width: 1180px) {
  body.rossa-tabs-on #bloque-resumen .vr-resumen__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  body.rossa-tabs-on #bloque-resumen .vr-resumen__grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   33. VER RESERVA — cabecera de página (título + botón volver) y ajuste de las
   tarjetas de Resumen (menos redondez, badge de pago circular, check-in con
   icono, logo+nombre de origen).
   ========================================================================== */
/* Cabecera: "Ver reserva" + botón "Volver al gestor de reservas" */
body.rossa-tabs-on .vr-page-head { margin: 0 0 20px; }
body.rossa-tabs-on .vr-page-title {
  margin: 0 0 14px;
  font: 700 22px/1.2 var(--rossa-font);
  color: var(--rossa-ink);
}
body.rossa-tabs-on .vr-page-title__id { color: var(--rossa-teal); }
body.rossa-tabs-on .vr-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: var(--rossa-teal);
  color: #fff;
  font: 600 13px/1 var(--rossa-font);
  text-decoration: none;
  border: 0;
  border-radius: 6px;
  transition: background .15s ease;
}
body.rossa-tabs-on .vr-back-btn:hover,
body.rossa-tabs-on .vr-back-btn:focus { background: var(--rossa-petrol-dark); color: #fff; text-decoration: none; }

/* Tarjetas de Resumen menos redondeadas (6px) */
body.rossa-tabs-on #bloque-resumen .vr-section { border-radius: 6px; }


/* Check-in: icono + texto (verde si hecho, gris si no) */
body.rossa-tabs-on #bloque-resumen .vr-check { display: inline-flex; align-items: center; gap: 7px; font: 600 13.5px/1.3 var(--rossa-font); color: var(--rossa-ink); }
body.rossa-tabs-on #bloque-resumen .vr-check i { font-size: 15px; }
body.rossa-tabs-on #bloque-resumen .vr-check--yes i { color: var(--rossa-green); }
body.rossa-tabs-on #bloque-resumen .vr-check--no  i { color: var(--rossa-muted); }

/* Origen: logo + nombre del canal */
body.rossa-tabs-on #bloque-resumen .vr-origin-name { font: 600 13.5px/1.3 var(--rossa-font); color: var(--rossa-ink); }

/* Iconos de cabecera de las tarjetas del Resumen más grandes (los de 12px
   quedaban pequeños junto al título). */
body.rossa-tabs-on #bloque-resumen .vr-section__title i { font-size: 16px; margin-right: 9px; }

/* Mayor separación del contenido de ver_reserva con el borde izquierdo (≈triple
   del hueco con el sidebar: 20px -> 60px, padding-left 280 -> 320). Solo en
   escritorio (donde el sidebar mide 260px); respeta los estados de menú
   colapsado (.hiddenmenu / body.showhidemenu) sumándoles el mismo +40px. */
@media (min-width: 1025px) {
  /* hueco izq. = 60px; el derecho se deja al doble (≈120px). El padding-right
     es el mismo en cualquier estado del menú (el colapso solo cambia el izq.). */
  body.rossa-tabs-on #contenido_admin { padding-left: 320px; padding-right: 120px; }
  body.rossa-tabs-on.showhidemenu #contenido_admin { padding-left: 110px; }
  body.rossa-tabs-on #contenido_admin.hiddenmenu { padding-left: 70px; }
}

/* =============================================================================
   34. TAB CLIENTE — rework plano: cabecera (nombre · contacto) + filas con
   separadores finos; acciones SIEMPRE visibles (sin toggle "Más acciones");
   horas y comentarios en dos mitades.
   ========================================================================== */
/* El contenedor de acciones ya no es una tarjeta emergente -> plano y en bloque
   (legacy ver_reserva.css lo ponía display:flex y sus hijos a width:90%, lo que
   apilaba todo en horizontal). */
body.rossa-tabs-on #edit_datos_cliente { display: block; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; }
/* solo anulamos el centrado horizontal legacy; el margen vertical queda libre
   para que los separadores .vr-cli-sep separen las secciones */
body.rossa-tabs-on #bloque-cliente #edit_datos_cliente > div { width: 100%; margin-left: 0; margin-right: 0; }

/* Cabecera: nombre · | · teléfono · | · email (en fila, con separadores verticales) */
body.rossa-tabs-on #bloque-cliente .vr-cli-head {
  display: flex; align-items: center; justify-content: flex-start;
  flex-wrap: wrap; gap: 10px 16px; padding: 2px 0;
}
/* separador de eje vertical entre los elementos de la cabecera */
body.rossa-tabs-on #bloque-cliente .vr-cli-head__div { flex: 0 0 auto; width: 1px; height: 18px; background: var(--rossa-border); }
body.rossa-tabs-on #bloque-cliente .vr-cli-head__name {
  font: 600 18px/1.25 var(--rossa-font); color: var(--rossa-ink); text-decoration: none;
}
body.rossa-tabs-on #bloque-cliente .vr-cli-head__name:hover { color: var(--rossa-teal); }
body.rossa-tabs-on #bloque-cliente .vr-cli-head__contact { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px; }
body.rossa-tabs-on #bloque-cliente .vr-cli-head__item { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--rossa-ink); }
body.rossa-tabs-on #bloque-cliente .vr-cli-head__item i { color: var(--rossa-teal); font-size: 13px; }
body.rossa-tabs-on #bloque-cliente .vr-cli-head__item a { color: var(--rossa-cyan); text-decoration: none; }
body.rossa-tabs-on #bloque-cliente .vr-cli-head__item a:hover { text-decoration: underline; }
body.rossa-tabs-on #bloque-cliente .vr-cli-head__ficha { font-size: 13px; color: var(--rossa-cyan); text-decoration: none; white-space: nowrap; }
body.rossa-tabs-on #bloque-cliente .vr-cli-head__ficha:hover { text-decoration: underline; }

/* separador fino a todo el ancho entre secciones */
body.rossa-tabs-on #bloque-cliente .vr-cli-sep { height: 1px; background: var(--rossa-border); margin: 18px 0; }

/* fila de datos de la reserva (rejilla kv compacta) */
body.rossa-tabs-on #bloque-cliente .vr-cli-data { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 24px; }

/* dos columnas: horas (check-in | check-out) y comentarios (coment. | limpieza) */
body.rossa-tabs-on #bloque-cliente .vr-cli-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 36px; align-items: start; }
body.rossa-tabs-on #bloque-cliente .vr-cli-2col > .rossa-ctr__row,
body.rossa-tabs-on #bloque-cliente .vr-cli-2col > .rossa-ctr__commentary { width: 100%; margin: 0; }
@media (max-width: 760px) {
  body.rossa-tabs-on #bloque-cliente .vr-cli-2col { grid-template-columns: 1fr; }
  /* móvil: nombre arriba, teléfono y correo debajo en columna, sin separadores */
  body.rossa-tabs-on #bloque-cliente .vr-cli-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  body.rossa-tabs-on #bloque-cliente .vr-cli-head__div { display: none; }
}

/* --- Ajustes finos del tab Cliente --------------------------------------- */
/* Etiquetas de la fila de datos: más grandes (ya van en mayúsculas) */
body.rossa-tabs-on #bloque-cliente .vr-cli-data .vr-kv__label { font-size: 13px; letter-spacing: .05em; }

/* Etiquetas de sección en MAYÚSCULAS y más grandes (Cambiar cliente, Hora de
   check-in/out, Comentarios, Observaciones limpieza). Vencen al override §30. */
body.rossa-tabs-on #bloque-cliente #edit_datos_cliente .rossa-ctr__client-buttons > h2,
body.rossa-tabs-on #bloque-cliente #edit_datos_cliente .rossa-ctr__row h2,
body.rossa-tabs-on #bloque-cliente #edit_datos_cliente .rossa-ctr__commentary .rossa-subtitle {
  font: 700 13px/1.3 var(--rossa-font) !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--rossa-ink) !important;
  margin: 0 !important;
}

/* "Cambiar cliente": etiqueta a la izquierda, botones a su DERECHA (no debajo) */
body.rossa-tabs-on #bloque-cliente .rossa-ctr__client-buttons { align-items: center; gap: 10px 12px; }
body.rossa-tabs-on #bloque-cliente #edit_datos_cliente .rossa-ctr__client-buttons > h2 { flex: 0 0 auto !important; }

/* Botones Cliente nuevo/existente/facturación: color CLARO (outline), no relleno fuerte */
body.rossa-tabs-on #bloque-cliente .rossa-ctr__client-buttons .rossa-btn--default {
  background: var(--rossa-white) !important;
  color: var(--rossa-teal) !important;
  border: 1px solid var(--rossa-border) !important;
  font-weight: 600 !important;
}
body.rossa-tabs-on #bloque-cliente .rossa-ctr__client-buttons .rossa-btn--default:hover,
body.rossa-tabs-on #bloque-cliente .rossa-ctr__client-buttons .rossa-btn--default:active {
  background: var(--rossa-tint) !important;
  border-color: var(--rossa-teal) !important;
  color: var(--rossa-teal) !important;
}

/* Más aire alrededor de las secciones (separadores no pegados); la sección de
   horas espaciada del resto. */
body.rossa-tabs-on #bloque-cliente .vr-cli-sep { margin: 28px 0; }
body.rossa-tabs-on #bloque-cliente .vr-cli-2col.vr-cli-hours { margin: 6px 0; }
/* comentarios pegado a su separador superior -> darle aire */
body.rossa-tabs-on #bloque-cliente .vr-cli-2col.vr-cli-comments { margin: 6px 0; }

/* Comentarios / Observaciones limpieza: título + botón "Guardar" apilados a la
   izquierda; el textarea (más alto y menos ancho) a la derecha del título. */
body.rossa-tabs-on #bloque-cliente .rossa-ctr__commentary {
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 14px 18px;
}
body.rossa-tabs-on #bloque-cliente .rossa-ctr__commentary .rossa-ctr__data-accesseshour {
  display: flex !important; flex-direction: column; align-items: flex-start; gap: 10px;
  flex: 0 0 auto; width: auto; min-width: 120px;
}
body.rossa-tabs-on #bloque-cliente .rossa-ctr__commentary .rossa-subtitle { flex: 0 0 auto !important; }
body.rossa-tabs-on #bloque-cliente .rossa-ctr__commentary .rossa-ctr__textarea {
  order: 0; flex: 0 1 360px; width: auto; min-width: 0; max-width: 100%;
}
body.rossa-tabs-on #bloque-cliente .rossa-ctr__commentary .rossa-textarea,
body.rossa-tabs-on #bloque-cliente .rossa-ctr__commentary textarea { min-height: 120px; }

/* Horas: CHECK-IN en teal con «« ; CHECK-OUT en rojo con »» */
body.rossa-tabs-on #bloque-cliente #edit_datos_cliente .vr-cli-hours .rossa-ctr__row:nth-of-type(1) h2 { color: var(--rossa-teal) !important; }
body.rossa-tabs-on #bloque-cliente #edit_datos_cliente .vr-cli-hours .rossa-ctr__row:nth-of-type(2) h2 { color: var(--rossa-red) !important; }
body.rossa-tabs-on #bloque-cliente .vr-cli-hours .rossa-ctr__row:nth-of-type(1) h2::after { content: " \00AB\00AB"; font-weight: 700; }
body.rossa-tabs-on #bloque-cliente .vr-cli-hours .rossa-ctr__row:nth-of-type(2) h2::after { content: " \00BB\00BB"; font-weight: 700; }

/* Móvil: comentarios/observaciones en columna -> título, textarea y botón
   "Guardar" abajo. display:contents saca el título y el botón de
   .rossa-ctr__data-accesseshour para poder ordenarlos junto al textarea. */
@media (max-width: 760px) {
  body.rossa-tabs-on #bloque-cliente .rossa-ctr__commentary { flex-direction: column; align-items: stretch; }
  body.rossa-tabs-on #bloque-cliente .rossa-ctr__commentary .rossa-ctr__data-accesseshour { display: contents !important; }
  body.rossa-tabs-on #bloque-cliente .rossa-ctr__commentary .rossa-subtitle { order: 0 !important; }
  body.rossa-tabs-on #bloque-cliente .rossa-ctr__commentary .rossa-ctr__textarea { order: 1 !important; flex: 1 1 auto !important; width: 100% !important; max-width: none !important; }
  body.rossa-tabs-on #bloque-cliente .rossa-ctr__commentary .rossa-btn { order: 2 !important; align-self: flex-start; margin-top: 10px; }
}
/*=============================================================================
  38. SCREEN: Establecimientos y estancias  (module=estancias + edit_estancias)
  ---------------------------------------------------------------------------
  Override-first re-skin of the legacy lydia.css cards (grey #F5F6F8 / #F3F4F6
  surfaces, #bbb borders, box-shadows, #006169/#37A580/#E90A4D hardcoded hexes)
  into the flat-white Figma language: white cards, thin --rossa-border
  separators, teal accents, no shadows, ~10px radius, uppercase muted subtitles.
  Loads after lydia.css so equal-specificity rules win. We never touch the
  layout (flex/grid, widths) — only appearance. Functional greys kept.
=============================================================================*/

/* --- Establishment card: flat white, thin border, no shadow --- */
#contenido_admin .cont_establecimiento {
  background-color: #fff;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-shadow: none;
  padding: 16px;
  margin-bottom: 16px;
}
#contenido_admin .cab_establecimiento {
  border-bottom: 1px solid var(--rossa-border);
  padding-bottom: 12px;
  margin-bottom: 4px;
}
#contenido_admin .cab_establecimiento h2 {
  color: var(--rossa-ink);
  font-family: var(--rossa-font);
}
#contenido_admin .estab_info {
  color: var(--rossa-muted);
  letter-spacing: .04em;
}
/* min / max capacity pills -> teal (min) / red (max), pill radius */
#contenido_admin .estminmax {
  background-color: var(--rossa-teal);
  border-radius: var(--rossa-radius-pill);
  padding: 3px 10px;
}
#contenido_admin .estmax { background-color: var(--rossa-red); }
#contenido_admin .tipo_title { background-color: var(--rossa-teal); }

/* --- Estancia (room) card: flat white instead of grey + shadow --- */
#contenido_admin .estancia {
  background-color: #fff;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-shadow: none;
  color: var(--rossa-ink);
}
#contenido_admin .estancia:hover {
  box-shadow: none;
  border-color: var(--rossa-teal);
}
/* image / placeholder tile: teal icon on a subtle tint, rounded to match card */
#contenido_admin .bloq_estancia_iz i.fas {
  color: var(--rossa-teal);
  background-color: var(--rossa-surface);
  border-radius: var(--rossa-radius) var(--rossa-radius) 0 0;
}
#contenido_admin .bloq_estancia_iz img {
  border-radius: var(--rossa-radius) var(--rossa-radius) 0 0;
}
/* room name -> ink, slightly bolder */
#contenido_admin .texto_estancia {
  color: var(--rossa-ink);
  font-weight: 600;
}
/* baños / habitaciones meta -> muted */
#contenido_admin .desc_estancia,
#contenido_admin .desc_estancia span {
  color: var(--rossa-muted);
}
/* "Usos" / "Habitaciones" subsection headers -> thin border, small uppercase muted */
#contenido_admin .cab_subtitle_estancia {
  border-top: 1px solid var(--rossa-border);
}
#contenido_admin .cab_subtitle_estancia h4 {
  color: var(--rossa-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 12px;
  font-family: var(--rossa-font);
}
/* uso rows: thin separators, cyan text accent */
#contenido_admin .uso {
  border-bottom: 1px solid var(--rossa-border);
  padding: 4px 0 4px 4px;
  color: var(--rossa-ink);
}
/* habitaciones chips: subtle tint instead of flat grey */
#contenido_admin .cont_habit span {
  background-color: var(--rossa-surface);
  color: var(--rossa-ink);
  border-radius: var(--rossa-radius);
  padding: 4px 0;
}

/* --- Icon buttons: teal accent, teal fill on hover (matches global) --- */
#contenido_admin .icon_boton {
  color: var(--rossa-teal);
  border-radius: var(--rossa-radius);
}
#contenido_admin .icon_boton:hover {
  background-color: var(--rossa-teal);
  color: #fff;
}

/* --- edit_estancias step indicator (#pasos / .paso / .pasoactivo) --- */
#contenido_admin #pasos .paso {
  color: var(--rossa-muted);
  font-family: var(--rossa-font);
}
#contenido_admin #pasos .pasoactivo {
  color: var(--rossa-teal) !important;
}
@media (max-width: 850px) {
  #contenido_admin .sinhabita .cont_estancias { display: grid; }
}

/* --- edit_establecimiento / edit_agrupacion en móvil: botón Guardar -------- */
@media (max-width: 600px) {
  #contenido_admin form#add_establecimiento > table.estandar:last-of-type,
  #contenido_admin form#add_establecimiento > table.estandar:last-of-type tbody,
  #contenido_admin form#add_establecimiento > table.estandar:last-of-type tr,
  #contenido_admin form#add_establecimiento > table.estandar:last-of-type td,
  #contenido_admin form#add_agrupacion > table.estandar:last-of-type,
  #contenido_admin form#add_agrupacion > table.estandar:last-of-type tbody,
  #contenido_admin form#add_agrupacion > table.estandar:last-of-type tr,
  #contenido_admin form#add_agrupacion > table.estandar:last-of-type td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: none;
    padding-left: 0;
    padding-right: 0;
  }
  /* la cabecera "Guardar" sobra: el botón ya lo dice */
  #contenido_admin form#add_establecimiento > table.estandar:last-of-type tr.cab,
  #contenido_admin form#add_agrupacion > table.estandar:last-of-type tr.cab {
    display: none;
  }
  #contenido_admin form#add_establecimiento > table.estandar:last-of-type input[type="submit"],
  #contenido_admin form#add_agrupacion > table.estandar:last-of-type input[type="submit"] {
    width: 100%;
    box-sizing: border-box;
  }
}

/*=============================================================================
  39. SCREEN: Cierre de habitaciones  (module=gestor_rooms)
  ---------------------------------------------------------------------------
  Pantalla rehecha en dos columnas de lectura: primero se elige la estancia,
  luego se opera sobre ella (crear cierre + lista de cierres vigentes).
=============================================================================*/

/* --- Armazón de la pantalla ------------------------------------------------
   La pantalla tiene dos estados y cada uno pide un armazón distinto */
#contenido_admin .rooms-page {
  max-width: 1280px;   /* en monitores muy anchos el contenido deja de estirarse */
}
/* (a) estado inicial: columna centrada */
#contenido_admin .rooms-page:not(:has(#cerrar_estancia)):not(:has(#tabla_stay_closed_periods)) {
  max-width: 620px;
  margin: 0 auto;
  padding-top: 6px;
  text-align: center;   /* el bloque entero se lee como portada de la pantalla */
}
/* dentro de la tarjeta los campos siguen alineados a la izquierda */
#contenido_admin .rooms-page:not(:has(#cerrar_estancia)) #tabla_select_estancia .cab td,
#contenido_admin .rooms-page:not(:has(#cerrar_estancia)) #tabla_select_estancia td { text-align: left; }
#contenido_admin .rooms-page:not(:has(#cerrar_estancia)) #tabla_select_estancia tr:last-child td { text-align: center !important; }
#contenido_admin .rooms-page:not(:has(#cerrar_estancia)) #tabla_select_estancia { max-width: 100%; }
#contenido_admin .rooms-hint {
  margin: 14px 0 0;
  color: var(--rossa-muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
/* la columna "Estancia" no tiene contenido hasta elegir el tipo: su rótulo
   suelto sobre una celda vacía se lee como un campo que falta */
#contenido_admin #tabla_select_estancia:has(#select_stay:empty) .cab td:nth-child(2) { visibility: hidden; }

/* (b) estado de trabajo en escritorio: los dos formularios en paralelo y la
   lista de cierres a todo el ancho. Cada hijo directo se coloca en su celda
   (el marcado no tiene contenedores por bloque que agrupar). */
/* 1600px: el alta de cierre necesita ~620px de columna para que el motivo no
   quede como una rendija (dos fechas + textarea + botón). Por debajo se trabaja
   mejor a una sola columna que con dos apretadas. */
@media (min-width: 1600px) {
  #contenido_admin .rooms-page:has(#cerrar_estancia) {
    display: grid;
    /* el selector son dos desplegables; el alta de cierre lleva dos fechas, el
       motivo y el botón, así que se le da algo más de sitio */
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: 26px;
    align-items: start;
  }
  #contenido_admin .rooms-page:has(#cerrar_estancia) > h1:first-of-type { grid-area: 1 / 1 / 2 / -1; }
  #contenido_admin .rooms-page:has(#cerrar_estancia) > .rooms-back      { grid-area: 2 / 1 / 3 / -1; }
  #contenido_admin .rooms-page:has(#cerrar_estancia) > h1 ~ h1          { grid-area: 3 / 1 / 4 / -1; max-width: 100%; }
  /* La tarjeta del selector iguala la altura de la columna de la derecha (aviso
     + alta de cierre): con la altura natural quedaba un hueco vacío bajo ella.
     El grid usa align-items:start, así que el estirado se pide aquí. */
  #contenido_admin .rooms-page:has(#cerrar_estancia) > #form_choose_stay {
    grid-area: 4 / 1 / 5 / 2;
    align-self: stretch;
  }
  /* La tarjeta llena la altura de la fila, pero su contenido (campos + botón) se
     queda como bloque centrado en vertical: repartido por filas de tabla dejaba
     los desplegables arriba y el botón abajo con un vacío en medio.
     tbody vuelve a display:table para conservar la fila de dos columnas. */
  #contenido_admin .rooms-page:has(#cerrar_estancia) #tabla_select_estancia {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 18px 22px;   /* simétrico: el 6/18 de la tarjeta descentraba el bloque */
  }
  #contenido_admin .rooms-page:has(#cerrar_estancia) #tabla_select_estancia tbody {
    display: table;
    width: 100%;
  }
  #contenido_admin .rooms-page:has(#cerrar_estancia) > #cerrar_estancia  { grid-area: 4 / 2 / 5 / 3; }
  #contenido_admin .rooms-page:has(#cerrar_estancia) > #response_stay    { grid-area: 5 / 1 / 6 / -1; }
  #contenido_admin .rooms-page:has(#cerrar_estancia) > br               { display: none; }
  #contenido_admin .rooms-page:has(#cerrar_estancia) > .rooms-section-title { grid-area: 6 / 1 / 7 / -1; }
  #contenido_admin .rooms-page:has(#cerrar_estancia) > .rooms-empty-state,
  #contenido_admin .rooms-page:has(#cerrar_estancia) > #tabla_stay_closed_periods_wrapper { grid-area: 7 / 1 / 8 / -1; }
  #contenido_admin .rooms-page:has(#cerrar_estancia) > .rooms-batchbar  { grid-area: 8 / 1 / 9 / -1; }
  /* dentro del grid las tarjetas llenan su columna (el max-width de 860px era
     para el layout de una sola columna) */
  #contenido_admin .rooms-page:has(#cerrar_estancia) #tabla_select_estancia,
  #contenido_admin .rooms-page:has(#cerrar_estancia) #tabla_stay_close_period,
  #contenido_admin .rooms-page:has(#cerrar_estancia) #cerrar_estancia > p,
  #contenido_admin .rooms-page:has(#cerrar_estancia) #response_stay:not(:empty),
  #contenido_admin .rooms-page:has(#cerrar_estancia) .rooms-empty-state { max-width: 100%; }
  /* las dos tarjetas arrancan a la misma altura pese al aviso del criterio de
     fechas, que vive dentro del formulario de cierre */
  #contenido_admin .rooms-page:has(#cerrar_estancia) #form_choose_stay,
  #contenido_admin .rooms-page:has(#cerrar_estancia) #cerrar_estancia { margin: 0; }
  /* las dos columnas arrancan y terminan a la misma altura: el aire superior lo
     da el margen del título de la estancia, no los márgenes de cada bloque */
  #contenido_admin .rooms-page:has(#cerrar_estancia) #tabla_select_estancia { margin: 0; }
  #contenido_admin .rooms-page:has(#cerrar_estancia) #tabla_stay_close_period { margin: 8px 0 0; }
  #contenido_admin .rooms-page:has(#cerrar_estancia) #cerrar_estancia > p { margin-top: 0; }
  #contenido_admin .rooms-page:has(#cerrar_estancia) > h1 ~ h1 { margin-bottom: 16px; }
}
/* En readonly (popup de cierres iCal) no hay formularios: solo título y lista,
   a una columna y con el ancho de la lista. */
#contenido_admin .rooms-page--readonly { max-width: 100%; }

/* Franja intermedia (tablet / portátil estrecho): la lista sigue siendo tabla
   —las fichas entran a 760px— pero sus 9 columnas piden más de lo que hay, así
   que scrollea dentro de su caja en vez de desbordar la página. */
@media (min-width: 761px) and (max-width: 1599px) {
  #contenido_admin #tabla_stay_closed_periods_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #contenido_admin #tabla_stay_closed_periods { min-width: 900px; }
}

/* --- Cabecera de pantalla --------------------------------------------------
   El "Volver a gestor de estancias" era un bloque teal a tamaño de CTA
   principal compitiendo con el h1; pasa a secundario discreto. */
#contenido_admin .rooms-page > h1 { margin-bottom: 4px; }
/* sin el botón "Volver" debajo (está comentado en el módulo), el título de la
   pantalla y el de la estancia quedaban pegados */
#contenido_admin .rooms-page:not(:has(.rooms-back)) > h1:first-of-type { margin-bottom: 16px; }
#contenido_admin .rooms-page .rooms-back { margin: 0 0 18px; }
#contenido_admin .rooms-page .rooms-back a.admin_boton {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 6px 14px;
  background-color: var(--rossa-white) !important;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-shadow: none;
  color: var(--rossa-muted) !important;
  font-size: 12.5px;
  font-weight: 600;
}
#contenido_admin .rooms-page .rooms-back a.admin_boton:hover {
  border-color: var(--rossa-teal);
  color: var(--rossa-teal) !important;
}
/* Nombre de la estancia cargada: viene como <h1> (segundo de la página) y
   competía con el título. Pasa a cabecera de sección con separador. En modo
   readonly (iCal) es el único h1 y conserva su tamaño. */
#contenido_admin .rooms-page h1 ~ h1 {
  max-width: 1100px;                 /* mismo ancho que las tarjetas de abajo */
  margin: 26px 0 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rossa-border);
  font-size: 20px;
  line-height: 1.25;
}

/* --- Tarjetas de formulario (selector de estancia + cerrar estancia) ------- */
#contenido_admin #tabla_select_estancia,
#contenido_admin #tabla_stay_close_period {
  width: 100%;
  max-width: 1100px;   /* a una columna acompañan el ancho de la lista */
  margin: 12px 0 26px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  border-collapse: separate;
  border-spacing: 0;
  padding: 6px 22px 18px;
  box-sizing: border-box;
}
/* etiquetas de columna (.cab) -> rótulos de campo */
#contenido_admin #tabla_select_estancia .cab td,
#contenido_admin #tabla_stay_close_period .cab td {
  background: none !important;
  border: none !important;
  color: var(--rossa-muted) !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  padding: 14px 10px 2px;
}
/* la 1ª .cab de "CERRAR ESTANCIA" es el título de la tarjeta */
#contenido_admin #tabla_stay_close_period tr.cab:first-child td {
  color: var(--rossa-ink) !important;
  font-size: 13px;
  padding: 8px 10px 12px;
  border-bottom: 1px solid var(--rossa-border) !important;
}
#contenido_admin #tabla_select_estancia td,
#contenido_admin #tabla_stay_close_period td {
  border: none;
  padding: 4px 10px;
  vertical-align: top;
  text-align: left;
  /* dentro de la tarjeta blanca no cabe el zebra de §18 (`table.estandar tbody
     tr:nth-child(even) td`), que teñía la fila de campos de gris */
  background-color: transparent !important;
}
/* botón de cada tarjeta: alineado con los campos, no centrado ni flotando */
#contenido_admin #tabla_select_estancia tr:last-child td {
  text-align: left !important;
  padding-top: 16px;
}
#contenido_admin #tabla_select_estancia #choose_stay,
#contenido_admin #tabla_stay_close_period input[type="submit"].admin_boton {
  margin: 0;
  min-width: 132px;
}
/* la celda del botón CERRAR alinea abajo con los inputs (los rótulos de arriba
   dejan los controles a distinta altura si se alinea por arriba) */
#contenido_admin #tabla_stay_close_period tr:not(.cab) td:last-child { vertical-align: bottom; }

/* Controles homogéneos: "Tipo habitación" es un Select2 con width inline de
   310px y "Estancia" un <select> nativo -> misma caja para los dos. */
#contenido_admin #tabla_select_estancia .select2-container {
  width: 100% !important;   /* vence el width inline que fija select2 */
  max-width: 320px;
}
/* :not(.select2-hidden-accessible) -> el <select> original que select2 esconde
   sigue en el DOM; si se le da ancho, desborda la página en móvil. */
#contenido_admin #tabla_select_estancia select:not(.select2-hidden-accessible) {
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
}
#contenido_admin #tabla_stay_close_period input[type="date"],
#contenido_admin #tabla_stay_close_period input[type="datepicker"],
#contenido_admin #tabla_stay_close_period textarea {
  width: 100%;
  box-sizing: border-box;
  /* misma caja para los tres campos de la fila: el textarea del motivo trae dos
     filas (44px) y los input[type=date] se quedaban en 27px, así que sus bordes
     no cuadraban entre sí */
  min-height: 44px;
}
#contenido_admin #tabla_stay_close_period textarea {
  resize: vertical;
}
/* Reparto de la fila de campos: las fechas ocupan lo que miden y el motivo se
   queda con el espacio libre (sin esto, al estrecharse la columna en el layout
   de dos columnas la tabla repartía a partes iguales y el motivo salía como una
   caja de ~100px). */
#contenido_admin #tabla_stay_close_period tr:not(:first-child) td:nth-child(1),
#contenido_admin #tabla_stay_close_period tr:not(:first-child) td:nth-child(2) { width: 134px; }
/* width:100% en la celda del motivo = "quédate con todo el espacio libre" (un
   textarea con width:100% no aporta ancho intrínseco, así que con width:auto la
   columna colapsaba al mínimo) */
#contenido_admin #tabla_stay_close_period tr:not(:first-child) td:nth-child(3) { width: 100%; }
/* min-width:0 en el textarea: su tamaño intrínseco (cols=25) fijaba un ancho
   mínimo a la tabla y la tarjeta se salía de su columna del grid */
#contenido_admin #tabla_stay_close_period textarea { min-width: 0; }
#contenido_admin #tabla_stay_close_period tr:not(:first-child) td:nth-child(4) { width: 1%; white-space: nowrap; }
/* Nota del criterio de fechas [inicio, fin): era un párrafo suelto que se leía
   como relleno; pasa a aviso con barra teal. */
#contenido_admin #cerrar_estancia > p {
  max-width: 1100px;
  box-sizing: border-box;   /* mismo ancho exacto que la tarjeta de abajo */
  margin: 0 0 4px;
  padding: 10px 14px;
  background: var(--rossa-tint);
  border-left: 3px solid var(--rossa-teal);
  border-radius: 0 var(--rossa-radius) var(--rossa-radius) 0;
  color: var(--rossa-ink);
  font-size: 12.5px;
  line-height: 1.45;
}
/* respuesta del alta de cierre (ok / error con reservas asociadas) */
#contenido_admin #response_stay:not(:empty) {
  max-width: 1100px;
  margin: 14px 0 0;
}

/* --- Título de la lista + contador ---------------------------------------- */
#contenido_admin .rooms-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 6px;
  color: var(--rossa-ink);
  font-size: 13px;
  letter-spacing: .04em;
}
#contenido_admin .rooms-section-title .rooms-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  background: var(--rossa-teal);
  border-radius: var(--rossa-radius-pill);
  color: var(--rossa-white);
  font-size: 11.5px;
  font-weight: 700;
}
/* sin cierres: caja de estado vacío en lugar de una frase colgando */
#contenido_admin .rooms-empty-state {
  max-width: 1100px;
  box-sizing: border-box;
  margin: 6px 0 0;
  padding: 22px;
  background: var(--rossa-white);
  border: 1px dashed var(--rossa-border);
  border-radius: var(--rossa-radius);
  color: var(--rossa-muted);
  font-size: 13px;
  text-align: center;
}

/* --- DataTables: controles superiores (buscar + nº de registros) ----------- */
#contenido_admin .dataTables_wrapper .dataTables_length,
#contenido_admin .dataTables_wrapper .dataTables_filter {
  color: var(--rossa-muted);
  font-family: var(--rossa-font);
  font-size: 13px;
}
#contenido_admin .dataTables_wrapper .dataTables_filter input,
#contenido_admin .dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  padding: 6px 10px;
  color: var(--rossa-ink);
  font-family: var(--rossa-font);
  background-color: var(--rossa-white);
}
#contenido_admin .dataTables_wrapper .dataTables_filter input:focus,
#contenido_admin .dataTables_wrapper .dataTables_length select:focus {
  outline: none;
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .12);
}
#contenido_admin #tabla_stay_closed_periods_wrapper .dataTables_filter { float: left; text-align: left; margin-bottom: 10px; }
#contenido_admin #tabla_stay_closed_periods_wrapper .dataTables_length { float: right; }

/* --- Tabla de cierres ----------------------------------------------------- */
#contenido_admin #tabla_stay_closed_periods thead th {
  background-color: var(--rossa-white);
  color: var(--rossa-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 2px solid var(--rossa-border);
}
#contenido_admin #tabla_stay_closed_periods.estandar th,
#contenido_admin #tabla_stay_closed_periods.estandar td {
  border: none;                                    /* fuera la rejilla #ddd */
  border-bottom: 1px solid var(--rossa-border);
  padding: 12px 10px;
  text-align: left;
  vertical-align: middle;
}
#contenido_admin #tabla_stay_closed_periods tbody tr:hover {
  background-color: var(--rossa-tint);
}
/* fila marcada para anulación: se distingue del hover */
#contenido_admin #tabla_stay_closed_periods tbody tr:has(.cierre-checkbox:checked) {
  background-color: var(--rossa-salmon);
}
/* el resaltado de columna ordenada de DataTables es un box-shadow inset */
#contenido_admin #tabla_stay_closed_periods tbody td.sorting_1,
#contenido_admin #tabla_stay_closed_periods tbody td.sorting_2,
#contenido_admin #tabla_stay_closed_periods tbody td.sorting_3 {
  background-color: transparent;
  box-shadow: none !important;
}
/* jerarquía de datos: el periodo manda; id / registro / usuario son metadatos */
#contenido_admin #tabla_stay_closed_periods td[data-label="Desde"],
#contenido_admin #tabla_stay_closed_periods td[data-label="Hasta"] {
  color: var(--rossa-ink);
  font-weight: 600;
  white-space: nowrap;
}
#contenido_admin #tabla_stay_closed_periods .rooms-nights {
  display: block;
  color: var(--rossa-muted);
  font-size: 11px;
  font-weight: 500;
}
#contenido_admin #tabla_stay_closed_periods td[data-label="Registrado"],
#contenido_admin #tabla_stay_closed_periods td[data-label="Usuario"] {
  color: var(--rossa-muted);
  font-size: 12px;
  white-space: nowrap;
}
#contenido_admin #tabla_stay_closed_periods .rooms-id {
  color: var(--rossa-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
#contenido_admin #tabla_stay_closed_periods td[data-label="Motivo"] {
  color: var(--rossa-ink);
  font-size: 13px;
  min-width: 220px;
}
#contenido_admin #tabla_stay_closed_periods .rooms-empty {
  color: var(--rossa-muted);
  font-style: italic;
}
/* checkbox de selección */
#contenido_admin #tabla_stay_closed_periods input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--rossa-teal);
  cursor: pointer;
}

/* Chip de origen: el valor crudo ("gestor_habitaciones") se sustituye en el PHP
   por etiqueta legible; el color separa lo que se hizo a mano de lo que entra
   por sincronización o proceso automático. */
#contenido_admin .rooms-origen {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--rossa-radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
#contenido_admin .rooms-origen--manual { background: rgba(0, 94, 102, .10);  color: var(--rossa-teal); }
#contenido_admin .rooms-origen--ical   { background: rgba(23, 121, 155, .12); color: var(--rossa-cyan); }
#contenido_admin .rooms-origen--cron   { background: var(--rossa-surface);    color: var(--rossa-muted); }
#contenido_admin .rooms-origen--otro   { background: var(--rossa-surface);    color: var(--rossa-muted); }

/* --- DataTables: pie (info + paginación) ---------------------------------- */
#contenido_admin .dataTables_wrapper .dataTables_info {
  color: var(--rossa-muted);
  font-size: 12px;
}
#contenido_admin #tabla_stay_closed_periods_wrapper .dataTables_info { float: left; text-align: left; }
#contenido_admin #tabla_stay_closed_periods_wrapper .dataTables_paginate { float: right; text-align: right; margin-top: 6px; }
#contenido_admin .dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
  color: var(--rossa-ink) !important;
  padding: 5px 11px;
  margin: 0 2px;
}
#contenido_admin .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--rossa-tint);
  border-color: var(--rossa-teal);
  color: var(--rossa-teal) !important;
}
#contenido_admin .dataTables_wrapper .dataTables_paginate .paginate_button.current,
#contenido_admin .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--rossa-teal);
  border-color: var(--rossa-teal);
  color: var(--rossa-white) !important;
}
#contenido_admin .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
#contenido_admin .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--rossa-muted) !important;
  background: var(--rossa-white);
  border-color: var(--rossa-border);
  cursor: default;
}

/* --- Acciones destructivas ------------------------------------------------
   Cinco botones rojos en columna eran el elemento más llamativo de la pantalla
   (y anular es una acción de excepción): en reposo van neutros y el rojo se
   reserva para el hover/foco, que es cuando el usuario ya apunta al botón. */
#contenido_admin .btn-anular-cierre.admin_boton {
  min-width: 0;
  margin: 0;
  padding: 6px 12px;
  background-color: var(--rossa-white) !important;   /* vence lydia .boton_rojo */
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-shadow: none;
  color: var(--rossa-muted) !important;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
#contenido_admin .btn-anular-cierre.admin_boton:hover,
#contenido_admin .btn-anular-cierre.admin_boton:focus-visible {
  background-color: var(--rossa-salmon) !important;
  border-color: var(--rossa-red);
  color: var(--rossa-red) !important;
}
/* barra de anulación en lote: alineada con la tabla (el div trae text-align
   inline centrado) y con el pie de DataTables por encima */
#contenido_admin .rooms-batchbar {
  clear: both;
  max-width: 100%;
  margin-top: 18px !important;
  text-align: left !important;
}
#contenido_admin #btn-anular-lote.admin_boton {
  min-width: 0;
  margin: 0;
  padding: 8px 16px;
  border-radius: var(--rossa-radius);
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 600;
}
#contenido_admin #btn-anular-lote.admin_boton:disabled {
  background-color: var(--rossa-surface) !important;
  border: 1px solid var(--rossa-surface) !important;
  color: var(--rossa-muted) !important;
  cursor: not-allowed;
  opacity: 1;
}
/* con cierres marcados pasa a destructivo real */
#contenido_admin #btn-anular-lote.admin_boton:not(:disabled) {
  background-color: var(--rossa-salmon) !important;
  border: 1px solid var(--rossa-red) !important;
  color: var(--rossa-red) !important;
  cursor: pointer;
}
#contenido_admin #btn-anular-lote.admin_boton:not(:disabled):hover {
  background-color: var(--rossa-red) !important;
  color: var(--rossa-white) !important;
}

/* --- Móvil ----------------------------------------------------------------
   Las tres tablas dejan de maquetarse como tabla. Los formularios se apilan
   con su rótulo y la lista de cierres pasa a fichas: sin esto la tabla de 9
   columnas pedía ~900px y en un móvil de 390 se quedaban fuera de la pantalla
   el motivo, el origen y el propio botón de anular. */
@media (max-width: 760px) {
  #contenido_admin .rooms-page h1 ~ h1 { font-size: 18px; margin-top: 20px; }
  #contenido_admin .rooms-page .rooms-back a.admin_boton { width: auto; }

  /* -- formularios apilados -- */
  #contenido_admin #tabla_select_estancia,
  #contenido_admin #tabla_stay_close_period { padding: 6px 14px 16px; }
  #contenido_admin #tabla_select_estancia,
  #contenido_admin #tabla_select_estancia tbody,
  #contenido_admin #tabla_select_estancia tr,
  #contenido_admin #tabla_select_estancia td,
  #contenido_admin #tabla_stay_close_period,
  #contenido_admin #tabla_stay_close_period tbody,
  #contenido_admin #tabla_stay_close_period tr,
  #contenido_admin #tabla_stay_close_period td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
  }
  #contenido_admin #tabla_select_estancia tr.cab { display: none; }
  /* en CERRAR ESTANCIA la 1ª .cab es el título (se queda); la 2ª son rótulos
     de columna que ya se reponen campo a campo */
  #contenido_admin #tabla_stay_close_period tr.cab + tr.cab { display: none; }
  #contenido_admin #tabla_select_estancia tr:not(.cab) td::before,
  #contenido_admin #tabla_stay_close_period tr:not(.cab) td::before {
    display: block;
    color: var(--rossa-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11px;
    font-weight: 700;
    margin: 10px 0 4px;
  }
  #contenido_admin #tabla_select_estancia tr:not(.cab) td:first-child:not([colspan])::before { content: "Tipo habitación"; }
  #contenido_admin #tabla_select_estancia #select_stay::before { content: "Estancia"; }
  #contenido_admin #tabla_select_estancia #select_stay:empty { display: none; }
  /* apilados, los campos van a ancho completo: los anchos por columna del
     escritorio (fechas de 134px) dejaban los inputs de fecha a media caña */
  #contenido_admin #tabla_stay_close_period tr:not(:first-child) td:nth-child(1),
  #contenido_admin #tabla_stay_close_period tr:not(:first-child) td:nth-child(2),
  #contenido_admin #tabla_stay_close_period tr:not(:first-child) td:nth-child(3),
  #contenido_admin #tabla_stay_close_period tr:not(:first-child) td:nth-child(4) { width: 100%; }
  #contenido_admin #tabla_stay_close_period tr:not(.cab) td:nth-child(1)::before { content: "Inicio cierre"; }
  #contenido_admin #tabla_stay_close_period tr:not(.cab) td:nth-child(2)::before { content: "Fin cierre"; }
  #contenido_admin #tabla_stay_close_period tr:not(.cab) td:nth-child(3)::before { content: "Motivo"; }
  #contenido_admin #tabla_select_estancia .select2-container,
  #contenido_admin #tabla_select_estancia select:not(.select2-hidden-accessible) { max-width: 100%; }
  /* botones de formulario a ancho completo (objetivo táctil) */
  #contenido_admin #tabla_select_estancia #choose_stay,
  #contenido_admin #tabla_stay_close_period input[type="submit"].admin_boton {
    width: 100%;
    max-width: 100%;
    padding: 11px 16px;
  }
  #contenido_admin #tabla_stay_close_period tr:not(.cab) td:last-child::before { content: none; }
  #contenido_admin #tabla_stay_close_period tr:not(.cab) td:last-child { padding-top: 14px; }

  /* -- controles de DataTables apilados -- */
  #contenido_admin #tabla_stay_closed_periods_wrapper { overflow-x: visible; }
  #contenido_admin .dataTables_wrapper .dataTables_filter,
  #contenido_admin .dataTables_wrapper .dataTables_length {
    float: none !important;
    text-align: left !important;
    margin: 0 0 10px;
  }
  /* el label envuelve texto + input: en bloque, el campo cae debajo a todo el
     ancho en vez de salirse de la línea */
  #contenido_admin .dataTables_wrapper .dataTables_filter label { display: block; }
  #contenido_admin .dataTables_wrapper .dataTables_filter input {
    display: block;
    width: 100%;
    margin: 6px 0 0;
    box-sizing: border-box;
  }

  /* -- la lista de cierres pasa a fichas -- */
  #contenido_admin #tabla_stay_closed_periods,
  #contenido_admin #tabla_stay_closed_periods tbody,
  #contenido_admin #tabla_stay_closed_periods tr,
  #contenido_admin #tabla_stay_closed_periods td {
    display: block;
    width: auto;
    box-sizing: border-box;
  }
  #contenido_admin #tabla_stay_closed_periods thead { display: none; }
  #contenido_admin #tabla_stay_closed_periods { width: 100% !important; }
  #contenido_admin #tabla_stay_closed_periods tbody tr {
    position: relative;
    margin-bottom: 10px;
    padding: 12px 14px 14px 42px;   /* hueco izquierdo para el checkbox */
    background: var(--rossa-white);
    border: 1px solid var(--rossa-border);
    border-radius: var(--rossa-radius);
  }
  #contenido_admin #tabla_stay_closed_periods tbody tr:hover { background: var(--rossa-white); }
  #contenido_admin #tabla_stay_closed_periods tbody tr:has(.cierre-checkbox:checked) {
    background: var(--rossa-salmon);
    border-color: var(--rossa-red);
  }
  #contenido_admin #tabla_stay_closed_periods.estandar td {
    border: none !important;
    padding: 2px 0 !important;
    /* el zebra de §18 va por celda: dentro de la ficha pintaba franjas grises
       alternas dato a dato */
    background-color: transparent !important;
  }
  /* checkbox anclado arriba a la izquierda de la ficha */
  #contenido_admin #tabla_stay_closed_periods tbody td:first-child {
    position: absolute;
    top: 12px;
    left: 14px;
    padding: 0 !important;
  }
  #contenido_admin #tabla_stay_closed_periods tbody input[type="checkbox"] { width: 18px; height: 18px; }
  /* etiqueta + valor en una línea por dato */
  #contenido_admin #tabla_stay_closed_periods tbody td[data-label] {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  #contenido_admin #tabla_stay_closed_periods tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 84px;
    color: var(--rossa-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
  }
  /* ID y periodo forman la cabecera de la ficha */
  #contenido_admin #tabla_stay_closed_periods tbody td[data-label="ID"] {
    margin-bottom: 4px;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--rossa-border) !important;
  }
  #contenido_admin #tabla_stay_closed_periods tbody td[data-label="ID"]::before { content: none; }
  #contenido_admin #tabla_stay_closed_periods tbody td[data-label="ID"] .rooms-id {
    color: var(--rossa-ink);
    font-size: 13px;
    font-weight: 700;
  }
  #contenido_admin #tabla_stay_closed_periods tbody td[data-label="Desde"],
  #contenido_admin #tabla_stay_closed_periods tbody td[data-label="Hasta"] { font-size: 13.5px; }
  #contenido_admin #tabla_stay_closed_periods tbody td[data-label="Hasta"] { align-items: center; }
  #contenido_admin #tabla_stay_closed_periods tbody .rooms-nights { display: inline; margin-left: 6px; }
  #contenido_admin #tabla_stay_closed_periods tbody td[data-label="Motivo"] { min-width: 0; }
  /* el botón cierra la ficha, a ancho completo */
  #contenido_admin #tabla_stay_closed_periods tbody td[data-label="Operaciones"] {
    display: block;
    margin-top: 10px;
  }
  #contenido_admin #tabla_stay_closed_periods tbody td[data-label="Operaciones"]::before { content: none; }
  #contenido_admin .btn-anular-cierre.admin_boton {
    width: 100%;
    padding: 10px 12px;
    font-size: 12.5px;
  }

  /* -- pie: info y paginación centradas, y lote a ancho completo -- */
  #contenido_admin #tabla_stay_closed_periods_wrapper .dataTables_info,
  #contenido_admin #tabla_stay_closed_periods_wrapper .dataTables_paginate {
    float: none !important;
    text-align: center !important;
  }
  #contenido_admin #tabla_stay_closed_periods_wrapper .dataTables_paginate { margin-top: 10px; }
  #contenido_admin .dataTables_wrapper .dataTables_paginate .paginate_button { padding: 8px 14px; }
  #contenido_admin .rooms-batchbar { text-align: center !important; }
  #contenido_admin #btn-anular-lote.admin_boton { width: 100%; padding: 12px 16px; }
}

/*=============================================================================
  40. SCREEN: Partes de reserva y viajeros  (module=radix_reports)
  ---------------------------------------------------------------------------
  The module ships an inline <style> for the .status-* state badges without
  display/white-space, so on narrow widths the 11-column table squeezes the
  state cells and the badge text wraps, splitting the pill. Fix: badges become
  solid inline-blocks that never wrap, and the wide table scrolls horizontally
  inside .rossa-table-scroll instead of bursting. Semantic colors are kept.
=============================================================================*/

/* state badges + the ver-detalles link: the inline <style> leaves them as
   plain inline spans, so when the text wraps the colored background renders
   per line-fragment and looks broken ("explota"). inline-block makes the
   background enclose the whole (even multi-line) pill cleanly; we deliberately
   allow wrapping so the wide table still fits on desktop without scrolling. */
#contenido_admin #perfiles_fact .status-sin-enviar,
#contenido_admin #perfiles_fact .status-enviado,
#contenido_admin #perfiles_fact .status-exito,
#contenido_admin #perfiles_fact .status-fallido,
#contenido_admin #perfiles_fact .status-cancelado,
#contenido_admin #perfiles_fact .status-anulado,
#contenido_admin #perfiles_fact .status-tramitado-errores,
#contenido_admin #perfiles_fact .status-desconocido,
#contenido_admin #perfiles_fact .btn-ver-detalles {
  display: inline-block;
  line-height: 1.4;
}

/* keep the wide table at its natural width and let it scroll on small screens */
.rossa-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#contenido_admin .rossa-table-scroll > #perfiles_fact {
  min-width: 880px;
}

/* "Ver detalles" modal: the readonly textareas default to resize:both, so the
   corner handle drags them outside the modal box. Lock to vertical and make
   width padding-safe so they always stay within the modal. */
#detallesModal #modalPeticion,
#detallesModal #modalRespuesta,
#detallesModal #modalResponseLote {
  resize: vertical;
  max-width: 100%;
  box-sizing: border-box;
}

/*=============================================================================
  42. VER RESERVA — TAB PAGOS (rework: jerarquía de secciones + pie de pagos)
  ---------------------------------------------------------------------------
  CSS-only sobre #bloque-pagos: el DOM no se puede reordenar (forms anidados
  mal cerrados alrededor de "Cargos", y a#rossa-iframe.lydia_popup.reload debe
  seguir existiendo con su href en document.ready — ver_reserva.js:18,95 y
  lydia_popup.js:148 dependen de él). Los botones del pie y las tablas de
  totales vienen de admin/css/rossa_components.css (.rossa-button--old-gray,
  .rossa-payment-attempts__*); aquí se re-visten. Donde hay que ganar a una
  regla de §30/31b se replica su prefijo body.rossa-tabs-on (misma
  especificidad, decide el orden de carga).
=============================================================================*/

/* --- Encabezados de sección: Hay Tarjeta / IVA / Transacciones / Cargos /
   Pagos comparten un mismo nivel visual (cada h2 llegaba con un estilo
   distinto). Selectores enumerados para no alcanzar los h2 de los modales
   .rossa-modal que cuelgan del mismo bloque. */
#bloque-pagos .rossa-ctr__content-card h2,
#bloque-pagos .rossa-ctr__data-iva h2,
#bloque-pagos .rossa-ctr__payment-try > h2,
#bloque-pagos .rossa-payment-attempts__title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--rossa-ink);
  margin: 0 0 12px;
}
/* En las filas inline (Tarjeta, IVA) el encabezado convive con su control */
#bloque-pagos .rossa-ctr__content-card h2,
#bloque-pagos .rossa-ctr__data-iva h2 { margin: 0; }

/* Etiquetas de campo dentro de Cargos (h5/h3 heredaban tamaños dispares) */
#bloque-pagos .rossa-ctr__bill h5,
#bloque-pagos .rossa-ctr__commentary .rossa-subtitle {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--rossa-muted);
  margin: 0;
}

/* Ritmo vertical homogéneo entre secciones */
#bloque-pagos .rossa-separator--full { margin: 26px 0 22px; }

/* --- Hay Tarjeta: fuera el PNG naranja de 50px; el estado Sí/No pasa a ser
   una píldora (el texto ya lleva la información, el icono solo la duplicaba) */
#bloque-pagos .rossa-ctr__content-card img,
#bloque-pagos .rossa-ctr__content-card .rossa-i { display: none; }
#bloque-pagos .rossa-ctr__content-card {
  display: flex;
  align-items: center;
  gap: 12px;
}
#bloque-pagos .rossa-ctr__content-card > span {
  display: inline-block;
  padding: 3px 14px;
  border-radius: var(--rossa-radius-pill);
  border: 1px solid var(--rossa-border);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--rossa-muted);
}
#bloque-pagos .rossa-ctr__content-card img[src*="SiTarjeta"] ~ span {
  color: var(--rossa-teal);
  border-color: var(--rossa-teal);
}

/* --- Transacciones: el aviso "módulo no habilitado" llega con style inline
   rojo; se re-viste como notice suave (p[style] = las variantes de error) */
#bloque-pagos .rossa-ctr__payment-try--transactions > p {
  font-size: 13px;
  color: var(--rossa-muted);
  margin: 0 0 14px;
}
#bloque-pagos .rossa-ctr__payment-try--transactions > p[style] {
  display: inline-block;
  padding: 9px 14px;
  border-radius: var(--rossa-radius);
  background: var(--rossa-salmon);
  color: var(--rossa-coral) !important;   /* gana al color:red inline */
  font-weight: 600;
}

/* --- Lista de pagos: "Pagos" abre sección propia dentro del contenedor de
   Cargos (no hay separador en el DOM); scroll interno un poco más alto */
#bloque-pagos .rossa-payment-attempts {
  gap: 16px;
  border-top: 1px solid var(--rossa-border);
  padding-top: 22px;
  margin-top: 26px;
}
#bloque-pagos .rossa-payment-attempts__body {
  max-height: 380px;
  padding-right: 6px;
  border-bottom-color: var(--rossa-border);
}
#bloque-pagos .rossa-payment-attempts-item { border-color: var(--rossa-border); }
#bloque-pagos .rossa-payment-attempts-item__id { color: var(--rossa-teal); }
#bloque-pagos .rossa-payment-attempts-item__type-payment-attempt {
  color: var(--rossa-teal);
  border-color: var(--rossa-teal);
}
/* re-asserted: la regla de arriba (con #id) ganaría al modificador --failed */
#bloque-pagos .rossa-payment-attempts-item__type-payment-attempt--failed {
  background: var(--rossa-salmon);
  color: var(--rossa-red);
  border-color: var(--rossa-red);
}
#bloque-pagos .rossa-payment-attempts__info { border-color: var(--rossa-border); }
#bloque-pagos .rossa-payment-attempts__info__title { color: var(--rossa-ink); }

/* --- Pie: acciones compactas a la izquierda, totales como tarjeta a la
   derecha (los enlaces heredaban el gris a todo lo ancho de --old-gray) */
body.rossa-tabs-on #bloque-pagos .rossa-payment-attempts__footer {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 18px 28px;
  align-items: start;
}
#bloque-pagos .rossa-payment-attempts__buttons {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}
#bloque-pagos .rossa-payment-attempts__buttons .rossa-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 10px 18px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: #fff;
  color: var(--rossa-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
}
#bloque-pagos .rossa-payment-attempts__buttons .rossa-button:hover {
  background: #fff;
  color: var(--rossa-teal);
  border-color: var(--rossa-teal);
  box-shadow: none;
}
/* Añadir pago o reembolso = acción principal */
#bloque-pagos .rossa-payment-attempts__buttons #rossa-iframe {
  background: var(--rossa-teal);
  color: #fff;
  border-color: var(--rossa-teal);
}
#bloque-pagos .rossa-payment-attempts__buttons #rossa-iframe:hover {
  background: #00474d;
  border-color: #00474d;
  color: #fff;
}

/* Totales: tarjeta blanca con filas etiqueta/importe; "Restante a pagar"
   pasa de barra naranja opaca a fila salmón con importe coral */
#bloque-pagos .rossa-payment-attempts__table {
  border-color: var(--rossa-border);
  border-radius: 10px;
  background: #fff;
}
#bloque-pagos .rossa-payment-attempts__table__row { color: var(--rossa-ink); }
#bloque-pagos .rossa-payment-attempts__table__row th,
#bloque-pagos .rossa-payment-attempts__table__row td {
  border-bottom-color: var(--rossa-border);
  padding: 11px 16px;
}
#bloque-pagos .rossa-payment-attempts__table__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--rossa-muted);
}
#bloque-pagos .rossa-payment-attempts__table__price { font-size: 14px; }
#bloque-pagos .rossa-payment-attempts__table__price--paid { color: var(--rossa-green); }
#bloque-pagos .rossa-payment-attempts__table__row--diff,
#bloque-pagos .rossa-payment-attempts__table__row--diff-bail {
  background: var(--rossa-salmon);
  color: var(--rossa-coral);
}
#bloque-pagos .rossa-payment-attempts__table__row--diff .rossa-payment-attempts__table__title,
#bloque-pagos .rossa-payment-attempts__table__row--diff-bail .rossa-payment-attempts__table__title {
  color: var(--rossa-coral);
}
#bloque-pagos .rossa-payment-attempts__table__price--diff,
#bloque-pagos .rossa-payment-attempts__table__price--diff-bail {
  color: var(--rossa-coral);
  font-size: 15px;
}

/* Móvil: colapso a una columna re-declarado aquí (la regla de escritorio de
   arriba ganaba por orden al colapso equivalente de 31b); los totales suben
   encima de las acciones y los botones ocupan el ancho repartido */
@media (max-width: 760px) {
  body.rossa-tabs-on #bloque-pagos .rossa-payment-attempts__footer {
    grid-template-columns: 1fr;
  }
  #bloque-pagos .rossa-payment-attempts__summary { order: -1; }
  #bloque-pagos .rossa-payment-attempts__buttons .rossa-button {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/*=============================================================================
  43. AYUDA CONTEXTUAL — modal desde el badge «?» del h1
  ---------------------------------------------------------------------------
  Convención portada de feature/tourist-taxes-design-system (módulo ttax02,
  documentada en docs/CONVENTIONS.md): la ayuda EXTENSA de una pantalla vive
  en un .rossa-modal (§25) que abre el badge span.rossa-help del <h1>; el
  tooltip tippy queda solo para descripciones cortas. Cada pantalla incluye su
  partial (admin/includes/help_modal_*.php) con el modal y su enganche JS.
  Clases genéricas: .rossa-help-modal (overlay) + .rossa-help-doc (contenido)
  — equivalen a #ttax-help-modal / .ttax-help-doc de la rama de origen.
=============================================================================*/
.rossa-help-modal .rossa-modal { max-width: 680px; }
.rossa-help-modal .rossa-modal__title i { color: var(--rossa-teal); }
/* «Entendido» reutiliza .rossa-modal__close para el cierre por JS, pero no
   debe heredar el aspecto del icono × (24px, hover rojo, padding 0 4px):
   restaura el .admin_boton primario teal con la caja canónica (9px 16px) */
.rossa-help-modal .rossa-modal__foot .admin_boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  line-height: 1.25;
  box-sizing: border-box;
  vertical-align: middle;
  font-size: 14px;
  border: 1px solid var(--rossa-teal);
  background-color: var(--rossa-teal);
  color: var(--rossa-white);
}
/* =====================================================================
   §32. SCREEN: tourist_taxes (configuraciones + repeater de bloques)
   Única sección nueva del módulo tourist_taxes; el resto de su UI
   reutiliza §25 (user manager). Scoped a #contenido_admin.
   ===================================================================== */
#contenido_admin #ttax-blocks { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
#contenido_admin .ttax-block { position: relative; border: 1px solid var(--rossa-border); border-radius: var(--rossa-radius); padding: 12px 14px 14px; background: #fff; }
#contenido_admin .ttax-block__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#contenido_admin .ttax-block__title { font-weight: 600; font-size: 13px; color: var(--rossa-muted); }
#contenido_admin .ttax-block__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; }
#contenido_admin .ttax-field { display: flex; flex-direction: column; gap: 3px; }
#contenido_admin .ttax-field > label { font-size: 12px; color: var(--rossa-muted); }
#contenido_admin .ttax-field input,
#contenido_admin .ttax-field select { width: 100%; box-sizing: border-box; }
#contenido_admin .ttax-field--check { flex-direction: row; align-items: center; gap: 6px; align-self: flex-end; padding-bottom: 7px; }
#contenido_admin .ttax-field--check input { width: auto; }
#contenido_admin #ttax-blocks-empty { color: var(--rossa-muted); font-size: 13px; padding: 8px 0; }

/* --- Cosméticos acotados a .ttax-page (lista + formulario del módulo) -------
   Wrapper aditivo .ttax-page (no renombra nada): nos da un gancho para corregir
   sólo las pantallas de tasas sin tocar el resto del admin. */

/* Enlace «nombre de configuración»: la regla global de §1
   (.rossa-table a:not(...)) lo tiñe con el cyan Figma #00a8d2 — ajeno a la
   paleta de convenciones. Lo unificamos al token de enlaces --rossa-cyan
   (#17799b). Excluimos .rossa-iconbtn para tratarlo aparte (abajo). */
#contenido_admin .ttax-page .rossa-table a:not(.rossa-btn):not(.rossa-btn-negative):not(.admin_boton):not(.rossa-iconbtn) {
  color: var(--rossa-cyan);
}
/* Icon-buttons de acción (editar/exportar son <a>): esa misma regla global los
   pintaba de #00a8d2 por especificidad; restauramos el teal propio de
   .rossa-iconbtn. */
#contenido_admin .ttax-page a.rossa-iconbtn { color: var(--rossa-teal); }

/* Botones de igual tamaño: lydia (input/button.admin_boton{padding:5px 10px})
   encoge los <button>/<input> frente a los <a>. Restauramos el padding canónico
   de .admin_boton (9px 16px) para que toolbar, modales y form queden uniformes. */
#contenido_admin .ttax-page a.admin_boton,
#contenido_admin .ttax-page button.admin_boton,
#contenido_admin .ttax-page input.admin_boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  line-height: 1.25;
  box-sizing: border-box;
  vertical-align: middle;
}

/* Pista breve bajo un campo (sustituye al «(vacío=sin tope)» dentro del <label>,
   que descuadraba la rejilla al saltar a 2 líneas). */
#contenido_admin .ttax-page .ttax-field .ttax-hint {
  font-size: 11px;
  color: var(--rossa-muted);
  line-height: 1.2;
}
/* Etiqueta del checkbox «IVA incluido»: mismo tamaño que el resto de labels del
   bloque (12px) — antes iba a 13px inline y rompía la uniformidad tipográfica. */
#contenido_admin .ttax-page .ttax-field--check label {
  font-size: 12px;
  color: var(--rossa-ink);
}
/* Inputs numéricos de los bloques: importe/edad/noches/IVA alineados a la derecha. */
#contenido_admin .ttax-page .ttax-field input[type="number"] { text-align: right; }
/* Nota del checkbox «Es una plantilla …»: texto secundario, más pequeño. */
#contenido_admin .ttax-page .ttax-tpl-note { font-size: 12px; color: var(--rossa-muted); }
/* Desplegable de patrones de fábrica (solo lectura) en el panel de mapeo. */
#contenido_admin .ttax-page .ttax-defaults { margin-top: 10px; }
#contenido_admin .ttax-page .ttax-defaults summary { cursor: pointer; color: var(--rossa-muted); font-size: 13px; }
/* Texto de estado vacío en celdas de tabla (NO usar span.rossa-help, que es el badge "?"). */
#contenido_admin .ttax-page .ttax-empty { color: var(--rossa-muted); font-size: 13px; }
/* Aire entre paneles consecutivos: en la pantalla de canales van dos seguidos y sin
   separación se leían como un solo bloque. Solo entre hermanos, para no meter un
   margen suelto arriba del primero. */
#contenido_admin .ttax-page .rossa-panel + .rossa-panel { margin-top: 28px; }

/* Modales de ayuda (#ttax-help-modal y #ttax-help-mapping-modal): doc algo más
   ancha y legible. El contenido (.ttax-help-doc) se estiliza más abajo de forma
   COMPARTIDA (por la clase, no por id) para que ambos modales se vean igual. */
#ttax-help-modal .rossa-modal,
#ttax-help-mapping-modal .rossa-modal { max-width: 680px; }
#ttax-help-modal .rossa-modal__title i,
#ttax-help-mapping-modal .rossa-modal__title i { color: var(--rossa-teal); }
/* «Entendido» reutiliza .rossa-modal__close (cierre por JS); su :hover lo teñía
   de rojo. Mantenemos el texto blanco sobre el relleno teal del .admin_boton. */
#ttax-help-modal .rossa-modal__foot .admin_boton:hover { color: var(--rossa-white); }
/* Botones de acción del pie de modal: reutilizan .rossa-modal__close para el cierre
   por JS, pero NO deben heredar el estilo del icono × (24px, sin relleno). Restauran
   el aspecto de .admin_boton (primario teal / ghost). Scoped a las pantallas ttax. */
#contenido_admin .ttax-page .rossa-modal__foot .admin_boton {
  font-size: 14px;
  border: 1px solid var(--rossa-teal);
  background-color: var(--rossa-teal);
  color: var(--rossa-white);
}
/* Botón hover: ayuda (modal de .rossa-help-modal) */
.rossa-help-modal .rossa-modal__foot .admin_boton:hover { color: var(--rossa-white); }

/* Botón hover y ghost: ayuda (modal de gestión de tasas — .ttax-page) */
#contenido_admin .ttax-page .rossa-modal__foot .admin_boton:hover { color: var(--rossa-white); }
#contenido_admin .ttax-page .rossa-modal__foot .admin_boton--ghost {
  border-color: var(--rossa-border);
  background-color: var(--rossa-white);
  color: var(--rossa-ink);
}
#contenido_admin .ttax-page .rossa-modal__foot .admin_boton--ghost:hover { color: var(--rossa-ink); background-color: var(--rossa-surface); }

/* Doc de ayuda: lead + secciones h4 con icono + <dl> clave/valor + nota.
   Resetea la sangría por defecto del <dl>/<dd> del navegador. */
.rossa-help-doc { font-size: 14px; line-height: 1.5; color: var(--rossa-ink); }
.rossa-help-doc .rossa-help-lead { margin: 0 0 14px; }
.rossa-help-doc p { margin: 0 0 8px; }
.rossa-help-doc .rossa-help-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--rossa-teal);
}

/* Contenido del doc de ayuda — scoped a .ttax-help-doc (contenedor compartido por
   ambos modales de ayuda) en vez de a un id, para que se vea igual en los dos.
   Resetea la sangría por defecto del <dl>/<dd> del navegador (era el "texto raro"). */
.ttax-help-doc { font-size: 14px; line-height: 1.5; color: var(--rossa-ink); }
.ttax-help-doc .ttax-help-lead { margin: 0 0 14px; }
.ttax-help-doc p { margin: 0 0 8px; }
.ttax-help-doc .ttax-help-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--rossa-teal);
}
.rossa-help-doc .rossa-help-h i,
.ttax-help-doc .ttax-help-h i { color: var(--rossa-teal); font-size: 13px; }

.rossa-help-doc .rossa-help-dl,
.ttax-help-doc .ttax-help-dl { margin: 0 0 6px; }

.rossa-help-doc .rossa-help-dl dt,
.ttax-help-doc .ttax-help-dl dt { margin-top: 8px; font-weight: 600; color: var(--rossa-ink); }

.rossa-help-doc .rossa-help-dl dd,
.ttax-help-doc .ttax-help-dl dd { margin: 2px 0 0 0; color: var(--rossa-muted); }

.rossa-help-doc .rossa-help-dl dd strong,
.ttax-help-doc .ttax-help-dl dd strong { color: var(--rossa-ink); }

.rossa-help-doc .rossa-help-tag,
.ttax-help-doc .ttax-help-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--rossa-cyan);
  border: 1px solid var(--rossa-border); 
  border-radius: var(--rossa-radius-pill);
  padding: 1px 9px;
}
.ttax-help-doc .ttax-help-muted,
.rossa-help-doc .rossa-help-muted { font-weight: 400; font-size: 12px; color: var(--rossa-muted); }
.ttax-help-doc .ttax-help-note,
.rossa-help-doc .rossa-help-note {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 12px;
  background: var(--rossa-surface);
  border-radius: var(--rossa-radius);
  font-size: 13px;
  color: var(--rossa-muted);
}
.rossa-help-doc .rossa-help-note i { margin-top: 2px; color: var(--rossa-teal); }

/* Acordeones del doc de ayuda (páginas con varias secciones grandes, p. ej.
   Página de Viajero): <details.rossa-help-acc> con chevron propio; el JS del
   partial abre solo la sección del tab activo. */
.rossa-help-doc details.rossa-help-acc {
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  margin: 0 0 10px;
}
.rossa-help-doc .rossa-help-acc > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--rossa-teal);
}
.rossa-help-doc .rossa-help-acc > summary::-webkit-details-marker { display: none; }
.rossa-help-doc .rossa-help-acc > summary::before {
  content: "\f054";               /* chevron-right */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--rossa-muted);
  transition: transform .15s ease;
}
.rossa-help-doc .rossa-help-acc[open] > summary::before { transform: rotate(90deg); }
.rossa-help-doc .rossa-help-acc__body { padding: 2px 14px 12px; }
.rossa-help-doc .rossa-help-acc__body .rossa-help-h:first-child { margin-top: 4px; }

/*=============================================================================
  44. SCREEN: Reubicar habitaciones (admin/reubicar_v2.php)
  ---------------------------------------------------------------------------
  Override-only sobre admin/css/reubicar_v2.css (que NO se toca). Sin cambios
  de HTML/JS: el JS (admin/js/reubicar_v2.js) reinyecta el cuerpo de las
  tarjetas al cambiar de estado, así que todo cuelga de las clases existentes.

  Decisiones (entrevista 2026-07-06):
  - Colores de estado = leyenda del calendario de ocupación (§41):
      disponible #f2f2f2 · reservada #bbe1f2 · con reservas #ef8c71 ·
      con cierres #a9a9a9 · pendiente de ubicar #cf0000 (se conserva) ·
      cierres+reservas = degradado 50/50. Texto ink sobre estados claros.
  - Chips de pago: 5 estados con la misma convención que las tarjetas de
    reserva (.rossa-card-tag-*: pagado #76BC21, no-pagado #EB5D37,
    pagrecepcion #B8990B, faltacobro/pendingpay #FAB511) — NO la paleta
    --rossa-admin-payment-* (su NP negro era inconsistente). El estado real
    lo emite el template (--booking-{pag|np|per|fc|pen}) vía el helper
    reserva::getPaymentStatusById(); la clase binaria legacy se conserva.
  - Tarjetas planas: sin sombra, radio 10, borde neutro; el color vive en la
    franja (click target — geometría intacta), el tag circular y los badges.
  - Acordeones estilo .rossa-scope-group: alojamiento con tinte --rossa-strip,
    estancia blanca con hover; chevrons teal.
  - Barra fija inferior blanca (patrón .rossa-form-actions) + CTA teal.
  - SCOPE ESTRICTO por IDs de página: .rossa-modal / .stay-container /
    .room-card existen en otros módulos (gestor_pagos, paymentMethods,
    complete_setup, pruebaschannel) — prohibido estilar clases sueltas.
=============================================================================*/
:root {
  /* Estados de habitación (reubicar) — tomados de la leyenda de ocupación */
  --rossa-reloc-libre:     #f2f2f2;  /* = .nlibre (texto ink) */
  --rossa-reloc-reservada: #bbe1f2;  /* = .nseleccionada (texto ink) */
  --rossa-reloc-ocupada:   #ef8c71;  /* = .nocupada */
  --rossa-reloc-cerrada:   #a9a9a9;  /* = .ncerrada */
  --rossa-reloc-pendiente: #cf0000;  /* sin equivalente en ocupación: se conserva */
}

/* --- Cabecera de reserva (#booking-info): de tarjeta centrada a fila meta --- */
div#booking-info { justify-content: flex-start; padding: 4px 0 12px; }
div#booking-info .booking-info-content {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  color: var(--rossa-ink);
}
#booking-info .title { font-size: 15px; text-align: left; color: var(--rossa-ink); }
#booking-info .booking-info__list { flex-direction: row; }
#booking-info .booking-info__list-item i { color: var(--rossa-teal); }
#booking-info .booking-info__list-item span { font-size: 13.5px; color: var(--rossa-muted); }

/* --- Acordeones: Alojamiento (nivel 1, tinte) / Estancia (nivel 2, blanca) --- */
#relocation-content .accommodation-container {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  overflow: hidden;
}
#relocation-content .accommodation__header {
  background-color: var(--rossa-strip);
  color: var(--rossa-ink);
  border-radius: 0;
}
#relocation-content .accommodation__header:hover { background-color: #e7ecec; }
#relocation-content .dropdown-accommodation__title { font-weight: 700; font-size: 15px; }
#relocation-content .stay-container {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  overflow: hidden;
}
#relocation-content .stay__header {
  background-color: var(--rossa-white);
  color: var(--rossa-ink);
  border-radius: 0;
  margin-bottom: 0;
}
#relocation-content .stay__header:hover { background-color: #e9eeee; }
#relocation-content .dropdown-stay__title { font-weight: 600; font-size: 14px; }
#relocation-content .dropdown-accommodation__icon i,
#relocation-content .dropdown-stay__icon i { color: var(--rossa-teal); }
#relocation-content .stay__body {
  background: transparent;
  border-radius: 0;
  border-top: 1px solid var(--rossa-hairline-soft);
}
/* Estados vacíos: "No se han encontrado estancias/habitaciones..." */
#relocation-content em { color: var(--rossa-muted); }

/* --- Tarjetas de habitación: planas, borde neutro; color en franja/tag ------ */
#relocation-content .room-card {
  box-shadow: none;
  border: 1px solid var(--rossa-border);
  border-radius: 10px;
}
/* Badges informativos (nº línea, huéspedes, llave, precio): aquietados */
#relocation-content .room-card-badge {
  background-color: var(--rossa-surface);
  color: var(--rossa-ink);
}
/* Los semánticos conservan texto blanco */
#relocation-content .room-card-badge--booking-pag,
#relocation-content .room-card-badge--booking-np,
#relocation-content .room-card-badge--booking-per,
#relocation-content .room-card-badge--booking-fc,
#relocation-content .room-card-badge--booking-pen,
#relocation-content .room-card-badge--closure { color: #fff; }
/* Estado de pago de reservas: misma convención que las tarjetas de reserva
   (.rossa-card-tag-* — admin/css/pagina_inicio.css, reutilizada en listados
   y ver reserva). El chip lleva la clase binaria legacy (pag/np, que fijaba
   el NP negro con !important) MÁS la de estado real que emite el template:
   per/fc/pen van después para ganar a np a igual especificidad. */
#relocation-content .room-card-badge--booking-pag { background: #76BC21 !important; }  /* = .rossa-card-tag-pagado */
#relocation-content .room-card-badge--booking-np  { background: #EB5D37 !important; }  /* = .rossa-card-tag-no-pagado */
#relocation-content .room-card-badge--booking-per { background: #B8990B !important; }  /* = .rossa-card-tag-pagrecepcion */
#relocation-content .room-card-badge--booking-fc,
#relocation-content .room-card-badge--booking-pen { background: #FAB511 !important; }  /* = -faltacobro / -pendingpay */
#relocation-content .room-card-badge--closure { background: var(--rossa-reloc-cerrada) !important; }

/* Por estado: franja + tag circular + chip de la leyenda de la barra fija */
#relocation-content .room--available .room-card__header,
#relocation-content .room--available .room-card-number,
#relocation-control-panel .rcp-legend__item span.room--available {
  background: var(--rossa-reloc-libre);
}
#relocation-content .room--reserved .room-card__header,
#relocation-content .room--reserved .room-card-number,
#relocation-control-panel .rcp-legend__item span.room--reserved {
  background: var(--rossa-reloc-reservada);
}
#relocation-content .room--with-bookings .room-card__header,
#relocation-content .room--with-bookings .room-card-number,
#relocation-control-panel .rcp-legend__item span.room--with-bookings {
  background: var(--rossa-reloc-ocupada);
}
#relocation-content .room--with-closures .room-card__header,
#relocation-content .room--with-closures .room-card-number,
#relocation-control-panel .rcp-legend__item span.room--with-closures {
  background: var(--rossa-reloc-cerrada);
}
#relocation-content .room--closures-and-bookings .room-card__header,
#relocation-content .room--closures-and-bookings .room-card-number,
#relocation-control-panel .rcp-legend__item span.room--closures-and-bookings {
  background: linear-gradient(90deg, var(--rossa-reloc-cerrada) 50%, var(--rossa-reloc-ocupada) 50%);
}
#relocation-content .room--need-locate .room-card__header,
#relocation-content .room--need-locate .room-card-number,
#relocation-control-panel .rcp-legend__item span.room--need-locate {
  background: var(--rossa-reloc-pendiente);
}
/* Estados claros: número/tag legibles en ink + anillo de definición */
#relocation-content .room--available .room-card-number,
#relocation-content .room--reserved .room-card-number {
  color: var(--rossa-ink);
  box-shadow: 0 0 0 1px var(--rossa-hairline-soft);
}
/* Etiqueta de estado del cuerpo ("Disponible" / "Bloqueado") */
#relocation-content .room--available .room-card-badge--highlight {
  background: var(--rossa-reloc-libre);
  color: var(--rossa-ink);
}
#relocation-content .room--need-locate .room-card-badge--highlight {
  background: var(--rossa-reloc-pendiente);
  color: #fff;
}
/* Selección (clase declarada por el JS; hoy inactiva — cobertura defensiva) */
#relocation-content .room--selected .room-card__header,
#relocation-content .room--selected .room-card-number { background-color: #8fcbe9; }
@keyframes selectedRoomAnimation {
  0%, 50%, 100% { background-color: var(--rossa-reloc-reservada); }
  25%, 75%      { background-color: #8fcbe9; }
}

/* --- Barra fija inferior: blanca, alineada al sidebar (patrón form-actions) -- */
#relocation-control-panel {
  background-color: var(--rossa-white);
  color: var(--rossa-ink);
  border-top: 1px solid var(--rossa-border);
  width: auto;
  left: 0px;                    /* = #menu width (como .rossa-form-actions) */
  right: 0;
  margin: 0;
}
body.showhidemenu #relocation-control-panel { width: auto; left: 0px; margin: 0; }
#msg-pending-locate { color: var(--rossa-ink); }
#infoselected {
  background-color: var(--rossa-strip);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  color: var(--rossa-ink);
}
#infoselected .infoselected-title { color: var(--rossa-ink); }
#infoselected .infoselected-item-title { color: var(--rossa-muted); text-decoration: none; }
#infoselected .infoselected-item-value { color: var(--rossa-ink); font-weight: 600; }
#relocation-control-panel .rcp-button {
  background-color: var(--rossa-teal);
  border-radius: var(--rossa-radius);
}
#relocation-control-panel .rcp-button:hover { background-color: #00474d; }
#relocation-control-panel .rcp-legend__item { color: var(--rossa-muted); }
#relocation-control-panel .rcp-legend__item span {
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(22, 41, 45, .12);  /* define chips claros */
}

/* --- Modales (SOLO por ID: .rossa-modal a pelo pertenece a gestor_pagos) ---- */
#locate-modal .modal-content,
#closure-info-modal .modal-content {
  background-color: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: 10px;
}
#locate-modal .modal-title,
#closure-info-modal .modal-title { font-size: 16px; font-weight: 700; color: var(--rossa-ink); }
#locate-modal .modal-close,
#closure-info-modal .modal-close { color: var(--rossa-muted); }
#locate-modal .modal-close:hover,
#closure-info-modal .modal-close:hover { color: var(--rossa-red); }
#locate-modal .data-item-title,
#closure-info-modal .data-item-title { color: var(--rossa-ink); font-weight: 600; }
#locate-modal .data-item-value,
#closure-info-modal .data-item-value { color: var(--rossa-muted); opacity: 1; }
#locate-modal .old-data { color: var(--rossa-red); }
#locate-modal .modal-body select {
  background-color: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  color: var(--rossa-ink);
}
#locate-modal .modal-body select:focus {
  outline: none;
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .12);
}
#locate-modal .modal-body select.error-field { border-color: var(--rossa-red); }
#locate-modal .rossa-modal-btn,
#closure-info-modal .rossa-modal-btn {
  border-radius: var(--rossa-radius);
  font-weight: 700;
  text-decoration: none;
}
#locate-modal .modal-btn--cancel,
#closure-info-modal .modal-btn--cancel {
  background-color: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  color: var(--rossa-ink);
}
#locate-modal .modal-btn--cancel:hover,
#closure-info-modal .modal-btn--cancel:hover { background-color: #e9eeee; color: var(--rossa-ink); }
#locate-modal .modal-btn--ok,
#closure-info-modal .modal-btn--ok {
  background-color: var(--rossa-teal);
  border: 1px solid var(--rossa-teal);
  color: var(--rossa-white);
}
#locate-modal .modal-btn--ok:hover,
#closure-info-modal .modal-btn--ok:hover { background-color: #00474d; border-color: #00474d; }
#locate-modal .rossa-modal-btn:disabled {
  color: #9aa3a3;
  background-color: #f2f4f5;
  border-color: var(--rossa-border) !important;  /* buster: legacy #bbb !important */
  cursor: not-allowed;
}

/* --- Móvil: espejo del breakpoint legacy (usa !important — buster) ---------- */
@media (max-width: 700px) {
  #relocation-control-panel {
    width: auto !important;
    left: 0;
    right: 0;
    margin: 0 !important;
  }
}

/*=============================================================================
  45. AVISOS — campanita del toolbar, panel desplegable y página module=avisos
  ---------------------------------------------------------------------------
  Sistema de avisos (PRD: prd-avisos-deuda-silenciosa.md). Campanita con badge
  renderizada server-side en #toolbar (admin/includes/footer.php), panel AJAX
  bajo demanda y página agrupada (admin/avisos.php + avisos_render.php).
  Filas por divs con el lenguaje del listado de gestor_pedidos (§6/§11/§18):
  fila blanca + separador hairline, zebra suave, cabecera uppercase muted 11px,
  enlaces cyan-fig, acento semántico por borde izquierdo (patrón .rossa-alert).
  Badge en rojo de marca (como Desconectar); importes adeudados en coral.
=============================================================================*/

/* Campanita: item del cluster derecho del toolbar. Mismo order que
   #nombreuser (4): al ir antes en el DOM queda entre la fecha y la cuenta. */
#toolbar #rossa-avisos-bell {
  order: 4;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  border-radius: var(--rossa-radius);
  color: var(--rossa-teal);
  text-decoration: none;
  line-height: 1;
}
#toolbar #rossa-avisos-bell:hover { background: var(--rossa-surface); }
#toolbar #rossa-avisos-bell .fa-bell { font-size: 16px; }

/* Badge contador: pill roja anclada a la esquina de la campana */
#rossa-avisos-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--rossa-radius-pill);
  background: var(--rossa-red);
  color: var(--rossa-white);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* ---- Grupo de avisos (página y panel) ---- */
.rossa-avisos-grupo { margin: 0 0 26px; }
.rossa-avisos-grupo__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  padding: 0 12px;
}
.rossa-avisos-grupo__titulo {
  margin: 0;
  font-family: var(--rossa-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--rossa-ink);
}
.rossa-avisos-grupo__count {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--rossa-radius-pill);
  background: var(--rossa-surface);
  border: 1px solid var(--rossa-border);
  font-size: 12px;
  font-weight: 700;
  color: var(--rossa-ink);
}

/* ---- Lista: look de listado gestor_pedidos, en divs ---- */
.rossa-avisos-lista { background: var(--rossa-white); }
.rossa-avisos-lista__head {
  display: grid;
  grid-template-columns: 1fr 110px 140px;
  gap: 16px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rossa-border);
  color: var(--rossa-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .03em;
}
.rossa-avisos-lista__head span:nth-child(3) { text-align: right; }

/* Lista SIN columna de fecha (página de avisos y campanita).
   La fecha solo la pintan las dos pantallas donde significa algo —"Llegada" en
   reservas_llegada_hoy, "Checkout" en reservas_cargos_pendientes—; en el resto de
   detectores (folios, reubicaciones, correo sin confirmar) la columna salía vacía
   en casi todas las filas, así que ni informa ni justifica el hueco. */
.rossa-avisos-lista--sin-fecha .rossa-avisos-lista__head,
.rossa-avisos-lista--sin-fecha .rossa-aviso { grid-template-columns: 1fr 140px; }
.rossa-avisos-lista--sin-fecha .rossa-avisos-lista__head span:nth-child(2) { text-align: right; }

/* Fila de aviso: entera clicable. Acento semántico por borde izquierdo
   (patrón .rossa-alert); hover con tint — aquí sí hay hover, a diferencia
   del listado, porque la fila completa es un enlace. */
.rossa-aviso {
  display: grid;
  grid-template-columns: 1fr 110px 140px;
  gap: 16px;
  align-items: center;
  padding: 14px 12px;
  background: var(--rossa-white);
  border-bottom: 1px solid var(--rossa-hairline-soft);
  border-left: 3px solid transparent;
  color: var(--rossa-ink);
  text-decoration: none;
  font-family: var(--rossa-font);
}
.rossa-aviso:nth-of-type(even) { background: var(--rossa-zebra); }
.rossa-aviso:hover { background: var(--rossa-tint); }
.rossa-aviso--warning  { border-left-color: var(--rossa-coral); }
.rossa-aviso--critical { border-left-color: var(--rossa-red); }
.rossa-aviso--info     { border-left-color: var(--rossa-cyan); }

.rossa-aviso__mensaje {
  color: var(--rossa-cyan-fig);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rossa-aviso:hover .rossa-aviso__mensaje { text-decoration: underline; }
.rossa-aviso__fecha { color: var(--rossa-muted); font-size: 13px; }
.rossa-aviso__fecha--urgente { color: var(--rossa-coral); font-weight: 700; }
.rossa-aviso__importe {
  color: var(--rossa-coral);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rossa-aviso__etiqueta {
  color: var(--rossa-coral);
  font-weight: 600;
  font-size: 12px;
  text-align: right;
  line-height: 1.3;
}

/* Pie de grupo: truncado + enlace a la página filtrada */
.rossa-avisos-grupo__mas {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--rossa-muted);
}
.rossa-avisos-grupo__mas a { color: var(--rossa-cyan-fig); text-decoration: none; }
.rossa-avisos-grupo__mas a:hover { text-decoration: underline; }

/* Estado vacío (página y panel): lenguaje .rossa-card--empty */
.rossa-avisos-vacio {
  margin: 8px 0;
  padding: 18px;
  border: 1px dashed var(--rossa-border);
  border-radius: 10px;
  text-align: center;
  color: var(--rossa-muted);
}

/* ---- Panel desplegable de la campanita: capa flotante bajo el toolbar. ---- */
#rossa-avisos-panel {
  position: fixed;
  top: 76px;
  right: 16px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  width: 420px;
  max-width: calc(100vw - 24px);
  max-height: min(72vh, calc(100vh - 92px));
  overflow: hidden;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: 12px;
  padding: 0;
  box-sizing: border-box;
}
#rossa-avisos-panel #rossa-avisos-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: inherit;
  overflow: hidden;
}
.rossa-avisos-panel-lista {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px;
}
#rossa-avisos-panel .rossa-avisos-grupo { margin-bottom: 12px; }
#rossa-avisos-panel .rossa-avisos-grupo:last-child { margin-bottom: 2px; }
#rossa-avisos-panel .rossa-avisos-grupo__head { padding: 0 4px; position: relative; }
#rossa-avisos-panel .rossa-avisos-grupo__titulo { font-size: 11px; }
#rossa-avisos-panel .rossa-avisos-grupo > .rossa-avisos-grupo__head::before,
#rossa-avisos-panel .rossa-avisos-grupo > .rossa-avisos-grupo__head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  cursor: pointer;
}
#rossa-avisos-panel .rossa-avisos-grupo > .rossa-avisos-grupo__head::before { bottom: 100%; }
#rossa-avisos-panel .rossa-avisos-grupo > .rossa-avisos-grupo__head::after { top: 100%; }
#rossa-avisos-panel .rossa-avisos-grupo[open] > .rossa-avisos-grupo__head::after { height: 4px; }
#rossa-avisos-panel .rossa-avisos-grupo > .rossa-avisos-grupo__head:hover::before,
#rossa-avisos-panel .rossa-avisos-grupo > .rossa-avisos-grupo__head:hover::after {
  background: var(--rossa-tint);
}
/* fila-resumen (actualizaciones): mismo reparto con su margen de 12px */
#rossa-avisos-panel .rossa-aviso-resumen { position: relative; }
#rossa-avisos-panel .rossa-aviso-resumen::before,
#rossa-avisos-panel .rossa-aviso-resumen::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  cursor: pointer;
}
#rossa-avisos-panel .rossa-aviso-resumen::before { bottom: 100%; }
#rossa-avisos-panel .rossa-aviso-resumen::after { top: 100%; }
#rossa-avisos-panel .rossa-aviso-resumen:hover { border-radius: 0; }
#rossa-avisos-panel .rossa-aviso-resumen:hover::before {
  background: var(--rossa-tint);
  border-radius: var(--rossa-radius) var(--rossa-radius) 0 0;
}
#rossa-avisos-panel .rossa-aviso-resumen:hover::after {
  background: var(--rossa-tint);
  border-radius: 0 0 var(--rossa-radius) var(--rossa-radius);
}
#rossa-avisos-panel .rossa-avisos-lista__head { display: none; }
#rossa-avisos-panel .rossa-aviso {
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  padding: 10px 8px;
  font-size: 13px;
}
/* En el panel las listas van siempre sin fecha: dos columnas (mensaje + detalle) */
#rossa-avisos-panel .rossa-avisos-lista--sin-fecha .rossa-aviso { grid-template-columns: 1fr auto; }
#rossa-avisos-panel .rossa-aviso:nth-of-type(even) { background: var(--rossa-white); }
#rossa-avisos-panel .rossa-aviso:hover { background: var(--rossa-tint); }
#rossa-avisos-panel .rossa-avisos-grupo__mas { padding: 8px; }
#rossa-avisos-panel .rossa-avisos-vacio {
  margin: 12px;
  padding: 20px 14px;
}

/* Resumen en campanita: fila con el MISMO ritmo que la cabecera de un grupo.
   Solo lo usan los avisos que no se pueden marcar como leídos (actualizaciones
   del núcleo y de módulos). Antes era una tarjeta tintada con un icono de 36px
   dentro de un círculo, y como el resto del panel pasó a ser una lista de filas
   plegables, esa tarjeta descolgaba: mismo panel, dos lenguajes visuales. Ahora
   comparte icono teal de 16px, título de 11px en mayúsculas, píldora de conteo y
   chevron, de modo que la única diferencia con un grupo es que este navega en
   lugar de desplegarse (chevron a la derecha, no hacia abajo).
   La severidad ya no tiñe la fila: en el panel ningún aviso lo hace. */
.rossa-aviso-resumen {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 4px 4px;
  border: 0;
  border-radius: var(--rossa-radius);
  background: transparent;
  text-decoration: none;
  font-family: var(--rossa-font);
  color: var(--rossa-ink);
  transition: background .12s ease;
}
.rossa-aviso-resumen:last-child { margin-bottom: 2px; }
.rossa-aviso-resumen:hover { background: var(--rossa-tint); }
.rossa-aviso-resumen:hover .rossa-aviso-resumen__cta { text-decoration: underline; }

/* 16px fijos (y no el ancho del glifo) para que los títulos de TODAS las filas
   del panel empiecen en la misma columna: los iconos de FontAwesome no son de
   ancho fijo salvo con .fa-fw, que no se puede añadir sin tocar el markup. */
.rossa-aviso-resumen__icon {
  flex: 0 0 16px;
  width: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  font-size: 12px;
  line-height: 1;
  color: var(--rossa-teal);
}

.rossa-aviso-resumen__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rossa-aviso-resumen__msg {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--rossa-ink);
}
.rossa-aviso-resumen__cta {
  font-size: 11px;
  font-weight: 500;
  color: var(--rossa-cyan);
}

.rossa-aviso-resumen__count {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--rossa-radius-pill);
  background: var(--rossa-surface);
  border: 1px solid var(--rossa-border);
  font-size: 12px;
  font-weight: 700;
  color: var(--rossa-ink);
  font-variant-numeric: tabular-nums;
}

/* Mismas métricas que .rossa-avisos-grupo__chevron: es lo que mantiene las
   píldoras de conteo alineadas entre filas de resumen y grupos plegables. */
.rossa-aviso-resumen__chevron {
  flex: 0 0 auto;
  margin-left: 8px;
  color: var(--rossa-muted);
  font-size: 10px;
}

#rossa-avisos-panel .rossa-aviso-resumen { margin-bottom: 12px; }

/* Pie del panel: enlace discreto a vista amplificada */
.rossa-avisos-panel__foot {
  flex: 0 0 auto;
  margin: 0;
  padding: 4px 10px 6px;
  border-top: 1px solid var(--rossa-hairline-soft);
  text-align: center;
  background: var(--rossa-white);
}
.rossa-avisos-panel__ampliada {
  display: inline-block;
  padding: 2px 6px;
  font: 500 11px/1.2 var(--rossa-font);
  color: var(--rossa-muted);
  text-decoration: none;
  border-radius: 4px;
}
.rossa-avisos-panel__ampliada:hover {
  color: var(--rossa-teal);
  background: transparent;
  text-decoration: underline;
}

/* Intro breve en páginas de avisos / listados dedicados */
.rossa-avisos-page-intro {
  margin: 0 0 16px;
  color: var(--rossa-muted);
  font: 400 13px/1.4 var(--rossa-font);
}

/* Loader de refresco (stale-while-revalidate) */
.rossa-avisos-panel--cargando #rossa-avisos-content {
  opacity: .45;
  pointer-events: none;
  transition: opacity .12s ease;
}
.rossa-avisos-panel--cargando::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 16px;
  width: 15px;
  height: 15px;
  border: 2px solid var(--rossa-border);
  border-top-color: var(--rossa-teal);
  border-radius: 50%;
  animation: rossa-avisos-spin .6s linear infinite;
}
@keyframes rossa-avisos-spin { to { transform: rotate(360deg); } }
.rossa-avisos-cargando { padding: 28px 16px; text-align: center; color: var(--rossa-muted); }

/* Móvil: panel a ancho útil + toolbar más compacta; listado página sin overflow */
@media (max-width: 700px) {
  .rossa-avisos-lista__head,
  .rossa-aviso { grid-template-columns: 1fr 64px 78px; gap: 6px; }
  .rossa-aviso { padding: 12px 8px; font-size: 13px; }
  .rossa-aviso__mensaje { white-space: normal; }
  .rossa-aviso__fecha { font-size: 11px; }
  .rossa-aviso__importe { font-size: 12px; }

  #rossa-avisos-panel {
    top: 50px;
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 58px - env(safe-area-inset-bottom, 0px));
    border-radius: 12px;
  }
  .rossa-avisos-panel-lista { padding: 10px; }
  /* En móvil la fila de resumen sigue al grupo plegable: mismas métricas, solo
     algo más de aire vertical para el dedo. */
  .rossa-aviso-resumen { padding: 6px 4px; }
  .rossa-aviso-resumen__msg { font-size: 11px; }
  .rossa-aviso-resumen__cta { font-size: 11px; }
  .rossa-avisos-panel__foot { padding: 4px 8px 6px; }
  .rossa-avisos-panel__ampliada {
    min-height: 0;
    width: auto;
    padding: 4px 8px;
    font-size: 11px;
  }

  /* Toolbar móvil: campana al tamaño de las pills + cluster derecho ordenado */
  #toolbar {
    gap: 6px;
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }
  #toolbar #rossa-avisos-bell {
    width: 38px;
    height: 34px;
    margin-left: auto;
    flex-shrink: 0;
  }
  #toolbar #rossa-avisos-bell .fa-bell { font-size: 15px; }
  #toolbar #btn-crear-reserva,
  #panel_user,
  #descon { flex-shrink: 0; }
  #toolbar #nombreuser { gap: 6px; }
  #toolbar .demo_mode {
    order: 2;
    font-size: 10px;
    padding: 2px 6px;
    max-width: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* -----------------------------------------------------------------------------
   45.b AVISOS — marcar como leído (alertas por usuario)

   La acción NO entra en el reparto de columnas: el grid vive en el propio <a> de
   la fila (.rossa-aviso) y su cabecera de columnas está escrita a mano en tres
   pantallas distintas, así que añadir una cuarta columna obligaría a mantener
   sincronizados tres markups y cuatro reglas de grid. En su lugar, la fila se
   envuelve en un contenedor posicionado y el botón va absoluto sobre el hueco
   que le reserva el padding derecho del enlace.
   ----------------------------------------------------------------------------- */

/* La fila es un flex: el enlace ocupa el espacio disponible y la acción va DETRÁS del
   texto, en su propio hueco. No se superpone al contenido (antes iba en posición absoluta
   y tapaba la columna derecha: el importe, el porcentaje de batería o el motivo). */
.rossa-aviso-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding-right: 8px;
}
.rossa-aviso-row .rossa-aviso { flex: 1 1 auto; min-width: 0; }

/* El zebra se mueve al contenedor: :nth-of-type cuenta entre hermanos del mismo
   tag, y al envolver cada <a> en su propio div ninguno es ya el segundo <a> de su
   padre, así que la regla original dejaría de alternar. */
.rossa-avisos-lista .rossa-aviso-row:nth-of-type(even) .rossa-aviso {
  background: var(--rossa-zebra);
}
#rossa-avisos-panel .rossa-avisos-lista .rossa-aviso-row:nth-of-type(even) .rossa-aviso {
  background: var(--rossa-white);
}

/* La acción SIEMPRE visible: un rectángulo con un tick, alineado a la derecha del texto.
   Estuvo con opacity:0 hasta el hover y era un error de bulto: no se descubría, y al no
   verla el usuario acababa pulsando la fila —que es un enlace— y navegando a otra pantalla,
   con lo que la función parecía estar rota. Un botón que ejecuta una acción tiene que verse
   sin condiciones. */
.rossa-aviso-marcar {
  align-self: center;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--rossa-border);
  border-radius: 6px;
  background: var(--rossa-white);
  color: var(--rossa-muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.rossa-aviso-marcar:hover {
  background: var(--rossa-teal);
  border-color: var(--rossa-teal);
  color: var(--rossa-white);
}
.rossa-aviso-marcar:focus-visible {
  outline: 2px solid var(--rossa-teal);
  outline-offset: 1px;
}
.rossa-aviso-marcar[disabled] { opacity: .45; cursor: default; }

/* Fila ya despachada (solo visible con el toggle "ver también los leídos").
   El distintivo es SOLO el color: fondo propio, acento izquierdo neutro (la severidad
   ya no aplica: el aviso está despachado) y texto apagado. Hubo además una píldora
   "Leída" que se retiró — decía en texto lo mismo que el tinte y cargaba una fila que
   ya lleva importe/etiqueta y botón; el estado sigue anunciado en el nombre accesible
   del botón ("Marcar como no leída").
   La especificidad iguala a la del zebra (.rossa-avisos-lista .rossa-aviso-row:…),
   así que gana por orden de carga sin necesidad de !important. */
.rossa-avisos-lista .rossa-aviso-row--leida .rossa-aviso,
.rossa-avisos-lista .rossa-aviso-row--leida:nth-of-type(even) .rossa-aviso {
  background: var(--rossa-strip);
  border-left-color: var(--rossa-border);
}
.rossa-aviso-row--leida .rossa-aviso { opacity: .7; }
.rossa-aviso-row--leida .rossa-aviso__mensaje { color: var(--rossa-muted); }
.rossa-aviso-row--leida .rossa-aviso-marcar {
  color: var(--rossa-cyan);
  border-color: var(--rossa-cyan);
}

/* -----------------------------------------------------------------------------
   Grupos plegables de la campanita (<details> / <summary>)

   El panel abre con los grupos COMPRIMIDOS —una línea por tipo, igual que el
   aviso agregado de siempre— y el usuario despliega el que le interesa. Al ser
   <details> nativo, el plegado no depende de JS.
   ----------------------------------------------------------------------------- */

details.rossa-avisos-grupo > summary.rossa-avisos-grupo__head {
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;          /* Firefox */
  user-select: none;
}
/* El triángulo nativo se sustituye por el chevron propio */
details.rossa-avisos-grupo > summary.rossa-avisos-grupo__head::-webkit-details-marker { display: none; }
details.rossa-avisos-grupo > summary.rossa-avisos-grupo__head::marker { content: ""; }
details.rossa-avisos-grupo > summary.rossa-avisos-grupo__head:hover { background: var(--rossa-tint); }
details.rossa-avisos-grupo > summary.rossa-avisos-grupo__head:focus-visible {
  outline: 2px solid var(--rossa-teal);
  outline-offset: -2px;
}
.rossa-avisos-grupo__chevron {
  margin-left: 8px;
  color: var(--rossa-muted);
  font-size: 10px;
  transition: transform .15s ease;
}
details.rossa-avisos-grupo[open] > summary .rossa-avisos-grupo__chevron { transform: rotate(180deg); }
/* El contador deja de empujar al chevron al final de la línea */
details.rossa-avisos-grupo > summary .rossa-avisos-grupo__count { margin-left: auto; }

/* Cabecera del panel con "marcar todas".
   flex:0 0 auto es necesario: #rossa-avisos-content es flex column con
   max-height heredado, y sin él esta cabecera se comprimiría cuando el panel
   llega a su altura máxima. El padding derecho reserva el sitio del spinner de
   carga, que se pinta en esa misma esquina. */
.rossa-avisos-panel__head {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  padding: 8px 40px 6px 12px;
  border-bottom: 1px solid var(--rossa-border);
}
.rossa-avisos-marcar-todas,
.rossa-avisos-marcar-tipo {
  border: 0;
  background: transparent;
  padding: 2px 4px;
  color: var(--rossa-cyan);
  font-family: var(--rossa-font);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.rossa-avisos-marcar-todas:hover,
.rossa-avisos-marcar-tipo:hover { text-decoration: underline; }
.rossa-avisos-marcar-todas[disabled],
.rossa-avisos-marcar-tipo[disabled] { opacity: .4; cursor: default; }

/* Icono del tipo en la cabecera del grupo: conserva la señal visual que antes
   daba la tarjeta de resumen, ahora que los avisos despachables van en lista. */
.rossa-avisos-grupo__icon {
  display: inline-flex;
  align-items: center;
  /* Ancho fijo, igual que .rossa-aviso-resumen__icon: sin esto cada glifo de
     FontAwesome mide lo suyo y los títulos del panel arrancan en columnas
     distintas según el icono que le toque al tipo de aviso. */
  flex: 0 0 16px;
  width: 16px;
  justify-content: center;
  margin-right: 6px;
  color: var(--rossa-teal);
  font-size: 12px;
}
.rossa-avisos-grupo--marcable .rossa-avisos-grupo__head { align-items: center; }

/* Toggle de leídos en la página module=avisos */
.rossa-avisos-page-barra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.rossa-avisos-toggle-leidos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rossa-muted);
  font-size: 12px;
  text-decoration: none;
}
.rossa-avisos-toggle-leidos:hover { color: var(--rossa-ink); }
.rossa-avisos-toggle-leidos.is-activo { color: var(--rossa-teal); font-weight: 600; }
.rossa-avisos-grupo--silenciados { opacity: .85; }

/* El badge pasa a contar elementos, no tipos, así que puede tener tres cifras:
   con el min-width original de 16px la pill se salía de la campana y pisaba el
   nombre de usuario del toolbar. */
#rossa-avisos-badge {
  max-width: 34px;
  overflow: hidden;
  box-sizing: content-box;
}

@media (max-width: 700px) {
  /* Área de pulsación cómoda en táctil */
  .rossa-aviso-marcar { width: 34px; height: 30px; }
  .rossa-aviso-row { gap: 4px; padding-right: 4px; }
  .rossa-avisos-panel__head { padding: 6px 36px 4px 8px; }
}

/*=============================================================================
  46. INDICADOR DE SALDO PENDIENTE (badge "Pagado")
  ---------------------------------------------------------------------------
  getPaymentStatusBadge() superpone <i.rossa-tag-pending> sobre el badge circular
  .rossa-card-tag cuando queda saldo por cobrar (lista de reservas e inicio). La
  marca es un disco BLANCO con el icono de aviso dentro: el glifo del <i> (reloj)
  se sustituye por la máscara Pendiente-Pago01 (octógono) en su ::before. En
  ver_reserva el aviso va como texto (.vr-pay-due) bajo el estado de pago de la
  card «Reserva».
=============================================================================*/
.rossa-card-tag { position: relative; overflow: visible; }
.rossa-card-tag .rossa-tag-pending {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background-color: var(--rossa-white);
  border: 1px solid var(--rossa-white);
  border-radius: 50%;
  box-sizing: border-box;
}
/* el ::before deja de ser el reloj de §32 y pasa a ser el aviso, a sangre
   dentro del disco blanco */
.rossa-card-tag .rossa-tag-pending::before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--rossa-red);
  -webkit-mask-image: url("https://cdn.rossa.app/icons/Pendiente-Pago01.svg");
          mask-image: url("https://cdn.rossa.app/icons/Pendiente-Pago01.svg");
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}
/* aviso de saldo restante bajo el estado de pago (card Reserva del resumen) */
body.rossa-tabs-on #bloque-resumen .vr-pay-due {
  font: 600 12px/1.35 var(--rossa-font);
  color: var(--rossa-coral);
}
/* =============================================================================
   §39  IMPORTACIÓN DE RESERVAS (import_bookings)
   Los botones combinan colores legacy (admin_ok/info/warning/ko) + .rossa-btn
   (verde), que gana por orden de carga. Reasignamos a la paleta oficial por sus
   clases; el prefijo #contenido_admin vence a .rossa-btn sin tocarlo global.
============================================================================= */
/* Primario (teal) — "Cargar archivo" / "Importar reservas" */
#contenido_admin .import-btn--primary {
  background-color: var(--rossa-teal);
  color: var(--rossa-white);
  border: 1px solid var(--rossa-teal);
}
#contenido_admin .import-btn--primary:hover,
#contenido_admin .import-btn--primary:active { background-color: #00474d; }

/* Secundario (blanco + borde) — Gestor, Atrás, exportar/importar config y
   condiciones, ver CSV completo, añadir condición/campo */
#contenido_admin .import-btn--secondary,
#contenido_admin .export-config-btn,
#contenido_admin .import-config-btn,
#contenido_admin .export-conditions-btn,
#contenido_admin .import-conditions-btn,
#contenido_admin .toggle-full-preview,
#contenido_admin .add-condition-btn,
#contenido_admin .add-custom-field-btn {
  background-color: var(--rossa-white);
  color: var(--rossa-ink);
  border: 1px solid var(--rossa-border);
}
#contenido_admin .import-btn--secondary:hover,
#contenido_admin .export-config-btn:hover,
#contenido_admin .import-config-btn:hover,
#contenido_admin .export-conditions-btn:hover,
#contenido_admin .import-conditions-btn:hover,
#contenido_admin .toggle-full-preview:hover,
#contenido_admin .add-condition-btn:hover,
#contenido_admin .add-custom-field-btn:hover { background-color: var(--rossa-surface); }

/* Destructivo (salmón + coral) — quitar condición / campo */
#contenido_admin .remove-condition-btn,
#contenido_admin .remove-custom-field-btn {
  background-color: var(--rossa-salmon);
  color: var(--rossa-coral);
  border: 1px solid #f6d6cd;
}
#contenido_admin .remove-condition-btn:hover,
#contenido_admin .remove-custom-field-btn:hover { background-color: #fbe0d8; }

/* =============================================================================
   §40  COMISIONES (comisiones.php) — restaura el look clásico (solo CSS)
   1) §12 `#contenido_admin form > input[type=submit].admin_boton {display:block;
      margin:14px auto}` tira "Ver" y "Modificar" a su propia línea centrada; los
      devolvemos a inline como antiguamente (scope por id, 2 ids > el selector §12).
   2) §18 `table.estandar tr td {color:ink}` y el zebra pisaban el `.tr-reserva td
      {color:#fff}` legacy; reponemos texto blanco y el fondo por estado en las
      filas-cabecera para que se lean sobre negro/morado/etc.
============================================================================= */
#contenido_admin #submit-fechas,
#contenido_admin #submit-comision {
  display: inline-block;
  vertical-align: middle;
  margin: 0 4px;
}
/* Selects mes/año a la altura de "Ver", e input de comisión a la altura de
   "Modificar" (misma caja que .admin_boton: font 14 / lh 1.25 / padding 9 / border 1). */
#contenido_admin .fechas-calendar select,
#contenido_admin #new-comision {
  font-size: 14px;
  line-height: 1.25;
  padding: 9px 8px;
  box-sizing: border-box;
  vertical-align: middle;
}
#contenido_admin #new-comision {
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  width: 64px;
  max-width: none;
}
#tablacomisiones .tr-reserva td { color: #fff; }
#tablacomisiones .tr-reserva td,
#tablacomisiones .tr-reserva.reservada-no-pagada td { background: rgb(50, 50, 50); }
#tablacomisiones .tr-reserva.pagada td    { background: #830083; }
#tablacomisiones .tr-reserva.facturada td { background: #008300; }
#tablacomisiones .tr-reserva.deleted td   { background: rgb(128, 0, 0); }

/* Ayuda de tasas turísticas (merge feature/rossa-v5.5 — billing concept) */
.ttax-help-doc .ttax-help-note i { margin-top: 2px; color: var(--rossa-teal); }

/*=============================================================================
  44. HELP-STEP ICONS — selector Lucide (module=add_help_step_v2) + render
  ---------------------------------------------------------------------------
  Los iconos de ayuda pasan de PNG a Lucide. Igual que §32, cada icono se
  pinta con el SVG del CDN como MÁSCARA rellena con currentColor
=============================================================================*/
.rossa-lucide {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: var(--ri) center / contain no-repeat;
          mask: var(--ri) center / contain no-repeat;
}
.rossa-lucide--danger { color: var(--rossa-red); }

i.rossa-lucide.img_icon_step { font-size: 30px; color: var(--rossa-teal); }
i.rossa-lucide.img_icon_step.rossa-lucide--danger { color: var(--rossa-red); }
@media (min-width: 700px) { i.rossa-lucide.img_icon_step { font-size: 45px; } }
/* Cabecera del bloque "Preguntas frecuentes": icono (antes img-pregunta.png de
   40px). Hereda el blanco de .cabecera_preguntas vía currentColor. */
.cabecera_preguntas .rossa-lucide.cabecera_preguntas__icon { font-size: 34px; }

/* Cabecera del huésped: botones idioma/contacto. */
.rossa-headbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #fff;
  /* Aro de color INSET: blanco por fuera (box-shadow blanco encima) + aro de color,
     replicando el doble borde de los PNG (~7% margen blanco, ~6% aro). */
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px currentColor;
  box-sizing: border-box;
  cursor: pointer;
  vertical-align: middle;
}
.rossa-headbtn .rossa-lucide { font-size: 15px; }
.rossa-headbtn--green { color: var(--rossa-green); }
.rossa-headbtn--teal  { color: var(--rossa-teal); }
@media (min-width: 700px) {
  .rossa-headbtn { width: 45px; height: 45px; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px currentColor; }
  .rossa-headbtn .rossa-lucide { font-size: 19px; }
}

/* ---- Selector en rejilla (editor de ayudas) ---- */
#contenido_admin .rossa-iconpick { margin: 4px 0 8px; }
#contenido_admin .rossa-iconpick__sel {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--rossa-border);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 18px;
}
#contenido_admin .rossa-iconpick__prev { font-size: 34px; color: var(--rossa-teal); line-height: 1; }
#contenido_admin .rossa-iconpick__prev.rossa-lucide--danger { color: var(--rossa-red); }
#contenido_admin .rossa-iconpick__meta { display: flex; flex-direction: column; gap: 2px; }
#contenido_admin .rossa-iconpick__meta b { font-size: 14px; }
#contenido_admin .rossa-iconpick__meta code {
  background: var(--rossa-surface);
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 12px;
  color: var(--rossa-ink);
  width: fit-content;
}
#contenido_admin .rossa-iconpick__sectitle {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--rossa-muted);
  font-weight: 700;
  margin: 18px 0 10px;
}
#contenido_admin .rossa-iconpick__sectitle span { color: var(--rossa-teal); }
#contenido_admin .rossa-iconpick__fav {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}
#contenido_admin .rossa-iconpick__favcell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 8px;
  border: 1px solid var(--rossa-border);
  border-radius: 12px;
  cursor: pointer;
  background: #fff;
}
#contenido_admin .rossa-iconpick__favcell:hover { border-color: var(--rossa-teal); }
#contenido_admin .rossa-iconpick__favcell .rossa-lucide { font-size: 30px; color: var(--rossa-teal); }
#contenido_admin .rossa-iconpick__favcell .rossa-lucide--danger { color: var(--rossa-red); }
#contenido_admin .rossa-iconpick__favcell .lbl { font-size: 13px; font-weight: 600; color: var(--rossa-ink); }
#contenido_admin .rossa-iconpick__favcell .sub { font-size: 11px; color: var(--rossa-muted); }
#contenido_admin .rossa-iconpick__favcell.is-sel { border-color: var(--rossa-teal); box-shadow: 0 0 0 2px rgba(0, 94, 102, .18); }
#contenido_admin .rossa-iconpick__search { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
#contenido_admin .rossa-iconpick__search input {
  flex: 0 1 320px;
  padding: 8px 12px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  font: inherit;
  color: var(--rossa-ink);
}
#contenido_admin .rossa-iconpick__search input:focus {
  outline: none;
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .12);
}
#contenido_admin .rossa-iconpick__search .n { font-size: 12px; color: var(--rossa-muted); }
/* Rejilla de iconos: solo dibujo, sin el nombre debajo (el nombre Lucide sigue
   en el DOM y en el title, y se ve en la vista previa al seleccionarlo). Al no
   haber etiqueta las celdas son cuadradas y caben muchas más por fila. */
#contenido_admin .rossa-iconpick__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 4px;
  max-height: 340px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--rossa-border);
  border-radius: 12px;
}
#contenido_admin .rossa-iconpick__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
}
#contenido_admin .rossa-iconpick__cell:hover { background: var(--rossa-surface); }
#contenido_admin .rossa-iconpick__cell .rossa-lucide { font-size: 22px; color: var(--rossa-ink); }
/* El nombre se conserva en el HTML (búsqueda/tooltip) pero no se pinta. */
#contenido_admin .rossa-iconpick__cell .cn { display: none; }
#contenido_admin .rossa-iconpick__cell.is-sel { border-color: var(--rossa-teal); background: rgba(0, 94, 102, .06); }
#contenido_admin .rossa-iconpick__cell.is-sel .rossa-lucide { color: var(--rossa-teal); }
/* En "Habituales" se queda la etiqueta en castellano y se oculta el nombre Lucide. */
#contenido_admin .rossa-iconpick__favcell .sub { display: none; }
@media (max-width: 720px) { #contenido_admin .rossa-iconpick__fav { grid-template-columns: repeat(2, 1fr); } }

/* =============================================================================
   §45  POLÍTICAS DE CANCELACIÓN (cancelation_policies + cancelation_policy_config)
   ---------------------------------------------------------------------------
   Wrapper aditivo .cxpol-page (no renombra clases legacy). Reutiliza §25
   (toolbar, .rossa-table--usuarios, .rossa-panel, .rossa-form-row, iconbtn,
   form-actions fijas). Aquí solo lo específico: textarea, meta de política,
   repeater de reglas y estados de validación.
============================================================================= */
#contenido_admin .cxpol-page .rossa-users-actions { margin: 8px 0 4px; }
#contenido_admin .cxpol-page .rossa-panel { margin-bottom: 12px; }
#contenido_admin .cxpol-page form > .rossa-panel { max-width: 720px; }
#contenido_admin .cxpol-page #rulesForm > .rossa-panel { max-width: none; }
#contenido_admin .cxpol-page .rossa-panel__head { padding: 10px 14px; }
#contenido_admin .cxpol-page .rossa-panel__body { padding: 10px 14px; }
#contenido_admin .cxpol-page .rossa-form-row {
  padding: 4px 0;
  gap: 10px;
  align-items: center;
}
#contenido_admin .cxpol-page .rossa-form-row > label,
#contenido_admin .cxpol-page .rossa-form-row > .rossa-form-label {
  flex: 0 0 168px;
  padding-top: 0;
}
#contenido_admin .cxpol-page .rossa-form-row:has(textarea),
#contenido_admin .cxpol-page .rossa-form-row:has(.cxpol-time-ref),
#contenido_admin .cxpol-page .rossa-form-row:has(.cxpol-lang-stack) { align-items: flex-start; }
#contenido_admin .cxpol-page .rossa-form-row:has(textarea) > label,
#contenido_admin .cxpol-page .rossa-form-row:has(textarea) > .rossa-form-label,
#contenido_admin .cxpol-page .rossa-form-row:has(.cxpol-time-ref) > label,
#contenido_admin .cxpol-page .rossa-form-row:has(.cxpol-time-ref) > .rossa-form-label,
#contenido_admin .cxpol-page .rossa-form-row:has(.cxpol-lang-stack) > label,
#contenido_admin .cxpol-page .rossa-form-row:has(.cxpol-lang-stack) > .rossa-form-label { padding-top: 8px; }
#contenido_admin .cxpol-page .rossa-help { margin: 3px 0 0; }
#contenido_admin .cxpol-page .rossa-form-row input[type="text"],
#contenido_admin .cxpol-page .rossa-form-row input[type="number"],
#contenido_admin .cxpol-page .rossa-form-row select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Textarea del formulario de política: misma caja que inputs de §25, pero
   ancho completo y altura cómoda (la descripción visible al cliente suele
   ser larga). */
#contenido_admin .cxpol-page .cxpol-textarea {
  width: 100%;
  max-width: 100%;
  min-height: 90px;
  padding: 8px 12px;
  box-sizing: border-box;
  resize: vertical;
  font-family: var(--rossa-font);
  font-size: 14px;
  color: var(--rossa-ink);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
}
#contenido_admin .cxpol-page .cxpol-textarea:focus {
  outline: none;
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .18);
}

/* Checkbox «Política activa» alineado con el resto de labels del form. */
#contenido_admin .cxpol-page .cxpol-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rossa-font);
  font-size: 14px;
  color: var(--rossa-ink);
  padding-top: 9px;
  cursor: pointer;
}
#contenido_admin .cxpol-page .cxpol-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--rossa-teal);
}

/* Metadatos de la política en la pantalla de reglas. */
#contenido_admin .cxpol-page .cxpol-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px 18px;
  margin: 0;
}
#contenido_admin .cxpol-page .cxpol-meta--wide { grid-column: 1 / -1; }
#contenido_admin .cxpol-page .cxpol-meta dt {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--rossa-muted);
  text-transform: uppercase;
  letter-spacing: .02em;
}
#contenido_admin .cxpol-page .cxpol-meta dd {
  margin: 0;
  font-size: 14px;
  color: var(--rossa-ink);
}

/* Bloque de ayuda encima del repeater. */
#contenido_admin .cxpol-page .cxpol-help { margin-bottom: 12px; }
#contenido_admin .cxpol-page .cxpol-help ul {
  margin: 8px 0 0;
  padding-left: 18px;
}
#contenido_admin .cxpol-page .cxpol-help li { margin-bottom: 4px; }
#contenido_admin .cxpol-page .cxpol-help__example {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--rossa-muted);
}

/* Repeater de umbrales v2 (cards). */
#contenido_admin .cxpol-page .cxpol-rules {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#contenido_admin .cxpol-page .cxpol-rules__empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--rossa-muted);
}
#contenido_admin .cxpol-page .cxpol-rules__empty i {
  font-size: 28px;
  opacity: .55;
  margin-bottom: 6px;
}
#contenido_admin .cxpol-page .cxpol-rule {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
}
#contenido_admin .cxpol-page .cxpol-rule__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
#contenido_admin .cxpol-page .cxpol-rule__title {
  font-size: 13px;
  color: var(--rossa-teal);
}
#contenido_admin .cxpol-page .cxpol-rule__grid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(240px, 2fr);
  gap: 14px 18px;
}
@media (max-width: 768px) {
  #contenido_admin .cxpol-page .cxpol-rule__grid { grid-template-columns: 1fr; }
}
#contenido_admin .cxpol-page .cxpol-rule__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
#contenido_admin .cxpol-page .cxpol-rule__field > label {
  font-size: 12px;
  font-weight: 700;
  color: var(--rossa-muted);
}
#contenido_admin .cxpol-page .cxpol-rule__field .cxpol-check { padding-top: 0; }
#contenido_admin .cxpol-page .cxpol-hours {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#contenido_admin .cxpol-page .cxpol-hours input[type="number"] {
  width: 96px;
  padding: 7px 10px;
  box-sizing: border-box;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  font-size: 14px;
  text-align: right;
}
#contenido_admin .cxpol-page .cxpol-hours input[type="number"]:focus {
  outline: none;
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .18);
}
/* Conversión horas → días (no reutilizar span.rossa-help: ese es el badge "?" 20×20) */
#contenido_admin .cxpol-page .cxpol-hours__hint {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--rossa-radius-pill);
  background: rgba(0, 94, 102, .08);
  color: var(--rossa-teal);
  font-family: var(--rossa-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
#contenido_admin .cxpol-page .cxpol-hours__hint:empty { display: none; }

/* Bloques multiidioma (descripción visible) */
#contenido_admin .cxpol-page .cxpol-lang-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
#contenido_admin .cxpol-page .cxpol-lang-block {
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  padding: 10px 12px;
  background: #fff;
}
#contenido_admin .cxpol-page .cxpol-lang-block__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--rossa-ink);
}
#contenido_admin .cxpol-page .cxpol-lang-block__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--rossa-radius-pill);
  background: rgba(0, 94, 102, .1);
  color: var(--rossa-teal);
  font-size: 11px;
  font-weight: 600;
}
#contenido_admin .cxpol-page .cxpol-lang-block .cxpol-textarea {
  width: 100%;
  min-height: 88px;
}

#contenido_admin .cxpol-page .cxpol-rule--locked {
  border-color: rgba(0, 94, 102, .28);
  background: rgba(0, 94, 102, .03);
}
#contenido_admin .cxpol-page .cxpol-locked-label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--rossa-ink);
}
#contenido_admin .cxpol-page .cxpol-locked-label i {
  color: var(--rossa-teal);
  margin-right: 4px;
}

/* Cargos: % / fijo / noches */
#contenido_admin .cxpol-page .cxpol-charge__types {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 8px;
}
#contenido_admin .cxpol-page .cxpol-charge__types .cxpol-check { padding-top: 0; }
#contenido_admin .cxpol-page .cxpol-charge__field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--rossa-muted);
  margin-bottom: 4px;
}
#contenido_admin .cxpol-page .cxpol-charge__input {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#contenido_admin .cxpol-page .cxpol-charge__input input {
  width: 110px;
  padding: 7px 10px;
  box-sizing: border-box;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  font-size: 14px;
  text-align: right;
}
#contenido_admin .cxpol-page .cxpol-charge__input input:focus {
  outline: none;
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .18);
}
#contenido_admin .cxpol-page .cxpol-charge__input span {
  font-size: 13px;
  color: var(--rossa-muted);
}

/* Timeline resumen */
#contenido_admin .cxpol-page .cxpol-timeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-surface-2);
  font-size: 13px;
  color: var(--rossa-ink);
}
#contenido_admin .cxpol-page .cxpol-timeline__chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--rossa-radius-pill);
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--rossa-teal);
}

/* Referencia temporal en el form de plan */
#contenido_admin .cxpol-page .cxpol-time-ref .cxpol-check { padding-top: 0; }
#contenido_admin .cxpol-page .cxpol-time-ref__fixed {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 200px;
}
#contenido_admin .cxpol-page .cxpol-time-ref__fixed input[type="time"] {
  padding: 7px 10px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  font-size: 14px;
}

/* Validación client-side del formulario de reglas. */
#contenido_admin .cxpol-page .cxpol-invalid {
  border-color: var(--rossa-red) !important;
  box-shadow: 0 0 0 3px rgba(231, 0, 76, .18) !important;
}

/* Enlaces de acción en la tabla: no heredar cyan-fig de §6. */
#contenido_admin .cxpol-page .rossa-table a.rossa-iconbtn { color: var(--rossa-teal); }
#contenido_admin .cxpol-page .rossa-table a.rossa-iconbtn--danger { color: var(--rossa-red); }

/* Botones uniformes (mismo truco que §32 ttax). */
#contenido_admin .cxpol-page a.admin_boton,
#contenido_admin .cxpol-page button.admin_boton,
#contenido_admin .cxpol-page input.admin_boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  line-height: 1.25;
  box-sizing: border-box;
  vertical-align: middle;
}

/* =============================================================================
   §46  PLANES / TARIFAS (fees, fee_edit, price_plans, restriction_plans, boards)
   ---------------------------------------------------------------------------
   Wrapper aditivo .plans-page. Reutiliza §25 (toolbar, panel, form-row, iconbtn,
   form-actions). Estiliza también las tablas legacy .estandar.plans-plan-table
   sin renombrar cab/redcab/IDs que el JS o los selectores antiguos puedan usar.
============================================================================= */
#contenido_admin .plans-page .rossa-users-actions {
  margin: 8px 0 4px;
}
#contenido_admin .plans-page .rossa-panel { margin-bottom: 12px; }

/* Formularios: el panel no se estira a todo el ancho dejando un vacío a la dcha. */
#contenido_admin .plans-page form > .rossa-panel { max-width: 720px; }
#contenido_admin .plans-page .plans-create-grid .rossa-panel { max-width: none; }

#contenido_admin .plans-page .rossa-panel__head { padding: 10px 14px; }
#contenido_admin .plans-page .rossa-panel__body { padding: 10px 14px; }

/* Filas de formulario más compactas. */
#contenido_admin .plans-page .rossa-form-row {
  padding: 4px 0;
  gap: 10px;
  align-items: center;
}
#contenido_admin .plans-page .rossa-form-row > label,
#contenido_admin .plans-page .rossa-form-row > .rossa-form-label {
  flex: 0 0 168px;
  padding-top: 0;
}
#contenido_admin .plans-page .rossa-form-row:has(textarea),
#contenido_admin .plans-page .rossa-form-row:has(.plans-origins-grid) {
  align-items: flex-start;
}
#contenido_admin .plans-page .rossa-form-row:has(textarea) > label,
#contenido_admin .plans-page .rossa-form-row:has(textarea) > .rossa-form-label,
#contenido_admin .plans-page .rossa-form-row:has(.plans-origins-grid) > label,
#contenido_admin .plans-page .rossa-form-row:has(.plans-origins-grid) > .rossa-form-label {
  padding-top: 8px;
}
#contenido_admin .plans-page .rossa-help {
  margin: 3px 0 0;
}
#contenido_admin .plans-page .rossa-panel__body > .rossa-users-actions:last-child {
  margin: 10px 0 0;
}
/* Móvil: la fila pasa a columna */
@media (max-width: 640px) {
  #contenido_admin .plans-page .rossa-form-row,
  #contenido_admin .plans-page .rossa-form-row:has(textarea),
  #contenido_admin .plans-page .rossa-form-row:has(.plans-origins-grid) {
    align-items: stretch;
    padding: 6px 0;
  }
  /* el contenedor del campo ocupa la fila entera (con align flex-start de la
     versión escritorio encogía al contenido, p. ej. el textarea a sus cols) */
  #contenido_admin .plans-page .rossa-form-row > div { width: 100%; }
  #contenido_admin .plans-page .rossa-form-row > label,
  #contenido_admin .plans-page .rossa-form-row > .rossa-form-label,
  #contenido_admin .plans-page .rossa-form-row:has(textarea) > label,
  #contenido_admin .plans-page .rossa-form-row:has(textarea) > .rossa-form-label,
  #contenido_admin .plans-page .rossa-form-row:has(.plans-origins-grid) > label,
  #contenido_admin .plans-page .rossa-form-row:has(.plans-origins-grid) > .rossa-form-label {
    flex: 0 0 auto;
    padding-top: 0;
  }
  #contenido_admin .plans-page .rossa-form-row input[type="text"],
  #contenido_admin .plans-page .rossa-form-row select {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }
}

#contenido_admin .plans-page a.admin_boton,
#contenido_admin .plans-page button.admin_boton,
#contenido_admin .plans-page input.admin_boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  line-height: 1.25;
  box-sizing: border-box;
  vertical-align: middle;
}

/* Textareas y campos sueltos del módulo de planes. */
#contenido_admin .plans-page .plans-textarea {
  width: 100%;
  max-width: 100%;
  min-height: 72px;
  padding: 8px 12px;
  box-sizing: border-box;
  resize: vertical;
  font-family: var(--rossa-font);
  font-size: 14px;
  color: var(--rossa-ink);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
}
#contenido_admin .plans-page .plans-textarea:focus {
  outline: none;
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .18);
}
#contenido_admin .plans-page .plans-keyword {
  font-size: 12px;
  color: var(--rossa-muted);
  background: var(--rossa-surface-2);
  border: 1px solid var(--rossa-border);
  border-radius: 4px;
  padding: 2px 7px;
}
#contenido_admin .plans-page .plans-inline-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
#contenido_admin .plans-page .plans-inline-fields input,
#contenido_admin .plans-page .plans-inline-fields select {
  max-width: 200px;
}
#contenido_admin .plans-page .plans-inline-fields--wrap input { max-width: 160px; }
#contenido_admin .plans-page .plans-coef { width: 80px; max-width: 80px; }

/* Checkboxes de orígenes en fee_edit. */
#contenido_admin .plans-page .plans-origins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px 12px;
  margin-top: 4px;
}
#contenido_admin .plans-page .plans-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--rossa-ink);
  cursor: pointer;
}
#contenido_admin .plans-page .plans-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--rossa-teal);
}

/* ---- Tarjetas del listado de tarifas (printFeeTarget) -------------------- */
#contenido_admin .plans-page .plans-fee-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
#contenido_admin .plans-page .plans-fee-card .rossa-panel__head {
  flex-wrap: wrap;
  gap: 8px 12px;
}
#contenido_admin .plans-page .plans-fee-card__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}
#contenido_admin .plans-page .plans-fee-card--off { opacity: .78; }
#contenido_admin .plans-page .plans-fee-card--off .rossa-panel__head {
  background: var(--rossa-salmon);
  color: var(--rossa-coral);
}
#contenido_admin .plans-page .plans-fee-card__table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  margin: 0;
}
#contenido_admin .plans-page .plans-fee-card__table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--rossa-border);
  vertical-align: top;
  background: transparent !important;
  color: var(--rossa-ink);
}
#contenido_admin .plans-page .plans-fee-card__table tr:last-child td { border-bottom: 0; }
#contenido_admin .plans-page .plans-fee-card__labels td {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--rossa-muted) !important;
  padding-top: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rossa-border);
}
#contenido_admin .plans-page .plans-fee-card__values td {
  font-size: 14px;
  font-weight: 500;
}
#contenido_admin .plans-page .plans-fee-card__origins {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#contenido_admin .plans-page .plans-origin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
#contenido_admin .plans-page .plans-origin__icon {
  max-width: 22px;
  max-height: 22px;
  vertical-align: middle;
}

/* ---- Tablas legacy de price/restriction plans ---------------------------- */
#contenido_admin .plans-page table.estandar.plans-plan-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  overflow: hidden;
  margin: 0 0 12px;
  font-family: var(--rossa-font);
  color: var(--rossa-ink);
}
#contenido_admin .plans-page table.estandar.plans-plan-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--rossa-border);
  background: var(--rossa-white) !important;
  color: var(--rossa-ink);
  vertical-align: middle;
}
#contenido_admin .plans-page table.estandar.plans-plan-table tr:last-child > td {
  border-bottom: 0;
}
#contenido_admin .plans-page table.estandar.plans-plan-table tr.cab > td,
#contenido_admin .plans-page table.estandar.plans-plan-table tr.redcab > td {
  background: var(--rossa-surface-2) !important;
  color: var(--rossa-teal) !important;
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid var(--rossa-border);
}
#contenido_admin .plans-page table.estandar.plans-plan-table tr.cab:first-child > td,
#contenido_admin .plans-page table.estandar.plans-plan-table tr.redcab:first-child > td {
  font-size: 15px;
  color: var(--rossa-ink) !important;
}
#contenido_admin .plans-page .plans-btn-inline {
  float: right !important;
  margin: 0 0 0 6px !important;
  vertical-align: middle;
}

/* Selects / inputs dentro de tablas de planes. */
#contenido_admin .plans-page table.estandar.plans-plan-table input[type="text"],
#contenido_admin .plans-page table.estandar.plans-plan-table input[type="number"],
#contenido_admin .plans-page table.estandar.plans-plan-table select,
#contenido_admin .plans-page table.estandar.plans-plan-table textarea {
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  padding: 8px 12px;
  font-family: var(--rossa-font);
  font-size: 14px;
  color: var(--rossa-ink);
  box-sizing: border-box;
  max-width: 100%;
}
#contenido_admin .plans-page table.estandar.plans-plan-table textarea {
  width: 100%;
  min-height: 80px;
}

/* Form rows: selects generados por baseHTML — ocupan el ancho del panel. */
#contenido_admin .plans-page .rossa-form-row select,
#contenido_admin .plans-page .rossa-form-row input[type="text"],
#contenido_admin .plans-page .rossa-form-row input[type="number"] {
  width: 100%;
  max-width: 100%;
  padding: 7px 12px;
  box-sizing: border-box;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  font-size: 14px;
  color: var(--rossa-ink);
  background: var(--rossa-white);
}
#contenido_admin .plans-page .rossa-form-row select:focus,
#contenido_admin .plans-page .rossa-form-row input:focus {
  outline: none;
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .18);
}

/* Grid de formularios de creación (personalizado + relativo/compacto). */
#contenido_admin .plans-page .plans-create-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
#contenido_admin .plans-page .plans-create-grid > form { display: contents; }
#contenido_admin .plans-page .plans-create-grid .rossa-panel { margin-bottom: 0; }

/* Tabla servicios / usos en edición: inputs compactos. */
#contenido_admin .plans-page .rossa-table input[type="number"],
#contenido_admin .plans-page .rossa-table select {
  width: 100%;
  max-width: 160px;
  padding: 6px 10px;
  box-sizing: border-box;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  font-size: 13px;
}

/* Enlaces iconbtn en tablas de regímenes. */
#contenido_admin .plans-page .rossa-table a.rossa-iconbtn { color: var(--rossa-teal); }
#contenido_admin .plans-page .rossa-table a.rossa-iconbtn--danger { color: var(--rossa-red); }

@media (max-width: 900px) {
  #contenido_admin .plans-page .plans-fee-card__table,
  #contenido_admin .plans-page .plans-fee-card__table tbody,
  #contenido_admin .plans-page .plans-fee-card__table tr,
  #contenido_admin .plans-page .plans-fee-card__table td {
    display: block;
    width: 100%;
  }
  #contenido_admin .plans-page .plans-fee-card__labels { display: none; }
  #contenido_admin .plans-page .plans-fee-card__values td {
    border-bottom: 1px solid var(--rossa-border);
    padding: 8px 0;
  }
  #contenido_admin .plans-page .plans-fee-card__actions {
    width: 100%;
    margin-left: 0;
  }
}

/*=============================================================================
  47. VER RESERVA · TAB RESERVA — bloque "Tasa turística" (lock + exención)
  ---------------------------------------------------------------------------
  Bloque de ttax02 anterior al rediseño (ver_reserva.php, #ttax-booking-box),
  adaptado solo por CSS. Dos arreglos:
  (a) aquí span.rossa-help es TEXTO de ayuda, no el badge "?" de §28 — cuya caja
      circular de 20px lo volvía una columna de palabras ilegible; se neutraliza
      acotado a este bloque.
  (b) filas al lenguaje del rework: etiqueta uppercase muted de ancho fijo +
      controles en línea; la ayuda cae debajo alineada con los controles.
=============================================================================*/
#ttax-booking-box > p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
#ttax-booking-box > p > strong {
  flex: 0 0 130px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--rossa-muted);
}
/* (a) des-badge: texto plano muted. La nota intermedia del estado "exenta"
   (— notas) fluye en línea; solo el help FINAL de cada fila (siempre último
   hijo) salta a su propia línea bajo los controles. */
#ttax-booking-box span.rossa-help {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  justify-content: flex-start;
  color: var(--rossa-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  cursor: default;
  user-select: text;
}
#ttax-booking-box span.rossa-help:hover { border: 0; color: var(--rossa-muted); }
#ttax-booking-box > p > span.rossa-help:last-child {
  flex: 1 0 100%;
  margin-left: 140px;   /* 130px de etiqueta + gap: alinea con los controles */
}
/* Controles a la altura de los botones ghost */
#ttax-booking-box select,
#ttax-booking-box input[type="text"] {
  height: 34px;
  box-sizing: border-box;
}
/* §31 centra los .admin_boton de los bloques con margin:auto; aquí van en línea */
#ttax-booking-box .admin_boton { margin: 0; }
@media (max-width: 700px) {
  #ttax-booking-box > p > strong { flex-basis: 100%; }
  #ttax-booking-box > p > span.rossa-help:last-child { margin-left: 0; }
}

/* Avisos de reserva (checkForAlerts: "No se ha determinado la tasa turística…"). */
#contenido_admin.rossa-ctr-admin > br:has(+ .mensaje_ok),
#contenido_admin.rossa-ctr-admin > br:has(+ .mensaje_warning),
#contenido_admin.rossa-ctr-admin > br:has(+ .mensaje_error),
#contenido_admin.rossa-ctr-admin > br:has(+ br + .mensaje_ok),
#contenido_admin.rossa-ctr-admin > br:has(+ br + .mensaje_warning),
#contenido_admin.rossa-ctr-admin > br:has(+ br + .mensaje_error),
#contenido_admin.rossa-ctr-admin > .mensaje_ok + br,
#contenido_admin.rossa-ctr-admin > .mensaje_warning + br,
#contenido_admin.rossa-ctr-admin > .mensaje_error + br { display: none; }
#contenido_admin.rossa-ctr-admin > .mensaje_ok,
#contenido_admin.rossa-ctr-admin > .mensaje_warning,
#contenido_admin.rossa-ctr-admin > .mensaje_error { margin: 12px 0; }

/*=============================================================================
  48. SCREEN: Registro N2 (module=registro_n2)
  ---------------------------------------------------------------------------
  Pantalla previa al rediseño (trae su propio <style> inline). Dos arreglos:
  (a) móvil: las tablas (.history-table/.bookings-table) desbordaban fuera de la
      caja .wizard-step; la caja pasa a adaptarse al ancho de su contenido
      (fit-content, sin encoger nunca por debajo del ancho disponible).
  (b) los .btn-action (azul bootstrap) pasan al lenguaje Rossa: primario teal
      calcado de .admin_boton; la variante .btn-secondary (Atrás, des/seleccionar)
      como secundario blanco con borde.
=============================================================================*/
#contenido_admin .wizard-step {
  width: fit-content;
  min-width: 100%;
  box-sizing: border-box;
}
#contenido_admin .wizard-step .btn-action {
  background-color: var(--rossa-teal);
  color: var(--rossa-white);
  border: 1px solid var(--rossa-teal);
  font-family: var(--rossa-font);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  padding: 9px 16px;
  border-radius: var(--rossa-radius);
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none !important;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#contenido_admin .wizard-step .btn-action:hover { background-color: #00474d; border-color: #00474d; }
#contenido_admin .wizard-step .btn-action:active { background-color: #003a40; }
#contenido_admin .wizard-step .btn-action.btn-secondary {
  background-color: var(--rossa-white);
  border-color: var(--rossa-border);
  color: var(--rossa-ink);
}
#contenido_admin .wizard-step .btn-action.btn-secondary:hover,
#contenido_admin .wizard-step .btn-action.btn-secondary:active { background-color: var(--rossa-surface); border-color: var(--rossa-border); }
/* Móvil: "Nuevo Depósito" (div flotado antes del h3 del histórico) baja a su
   propia fila BAJO el título en vez de compartir fila. Solo afecta a la caja
   del histórico (la única con hijo flotado, via :has). */
@media (max-width: 700px) {
  #contenido_admin .wizard-step:has(> div[style*="float"]) {
    display: flex;
    flex-direction: column;
  }
  #contenido_admin .wizard-step > h3 { order: 1; margin-bottom: 6px; }
  #contenido_admin .wizard-step > div[style*="float"] { order: 2; float: none; margin: 0 0 12px; }
  #contenido_admin .wizard-step > .history-table { order: 3; margin-top: 8px; }
}

/*=============================================================================
  49. SCREEN: Accesos y cerraduras — device_groups + device_scheduled_actions
  ---------------------------------------------------------------------------
  Los módulos traen botonera material propia (verde/rojo). Pasan al lenguaje
  Rossa: primario teal (como .admin_boton) y secundario blanco con borde.
=============================================================================*/
#contenido_admin .device-group-btn-primary {
  background-color: var(--rossa-teal);
  border: 1px solid var(--rossa-teal);
  color: var(--rossa-white);
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  font-weight: 700;
}
#contenido_admin .device-group-btn-primary:hover {
  background-color: #00474d;
  border-color: #00474d;
  color: var(--rossa-white);
}
#contenido_admin .device-group-btn-secondary {
  background-color: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  color: var(--rossa-ink);
  border-radius: var(--rossa-radius);
  font-family: var(--rossa-font);
  font-weight: 700;
}
#contenido_admin .device-group-btn-secondary:hover {
  background-color: var(--rossa-surface);
  border-color: var(--rossa-border);
  color: var(--rossa-ink);
}

/* device_scheduled_actions: los botones Editar/Eliminar de la tabla y los del
   formulario del programador llevan sus colores como ESTILOS INLINE
   (background:#007bff / #dc3545 / #fd7e14), que solo se ganan con !important. */
#contenido_admin .table-container a.btn.btn-primary {
  background: var(--rossa-teal) !important;
  color: var(--rossa-white) !important;
  border-radius: var(--rossa-radius) !important;
  font-family: var(--rossa-font);
}
#contenido_admin .table-container a.btn.btn-primary:hover { background: #00474d !important; }
/* Eliminar = destructivo Rossa: salmón + texto/borde rojos */
#contenido_admin .table-container button.btn.btn-danger {
  background: var(--rossa-salmon) !important;
  color: var(--rossa-red) !important;
  border: 1px solid var(--rossa-red) !important;
  border-radius: var(--rossa-radius) !important;
  font-family: var(--rossa-font);
}
#contenido_admin .table-container button.btn.btn-danger:hover {
  background: var(--rossa-red) !important;
  color: var(--rossa-white) !important;
}
/* separación entre ambos (en móvil se apilaban pegados: aire vertical) y
   mismo ancho para Editar/Eliminar */
#contenido_admin .table-container .btn {
  display: inline-block;
  margin: 3px 6px 3px 0 !important;
  min-width: 92px;
  text-align: center;
  box-sizing: border-box;
}

/* device_actions_programmer: Crear/Actualizar tarea = primario; Volver atrás
   (naranja inline) = secundario blanco con borde */
#contenido_admin .tarea-programada-form button.btn.btn-primary {
  background: var(--rossa-teal) !important;
  color: var(--rossa-white) !important;
  border: 1px solid var(--rossa-teal) !important;
  border-radius: var(--rossa-radius) !important;
  font-family: var(--rossa-font);
}
#contenido_admin .tarea-programada-form button.btn.btn-primary:hover { background: #00474d !important; border-color: #00474d !important; }
#contenido_admin .tarea-programada-form button.btn.btn-back {
  background: var(--rossa-white) !important;
  color: var(--rossa-ink) !important;
  border: 1px solid var(--rossa-border) !important;
  border-radius: var(--rossa-radius) !important;
  font-family: var(--rossa-font);
}
#contenido_admin .tarea-programada-form button.btn.btn-back:hover { background: var(--rossa-surface) !important; }

/*=============================================================================
  50. CALENDARIO — conmutador de vista (lineal / mensual)
  ---------------------------------------------------------------------------
  El menú lateral tiene UNA entrada "Calendario"; la vista se elige con dos
  iconos: líneas = lineal (admin/calendar.php, iframe React) y cuadrícula =
  mensual (admin/ocupacion.php). Marcado en admin/includes/calendario_vista_switch.php.
  Son enlaces reales entre módulos (no tabs JS) para no renderizar las dos
  vistas en el mismo request. Control segmentado plano: píldora blanca con
  borde, opción activa en teal. Etiquetas de texto solo para lectores de
  pantalla; el usuario ve icono + tooltip nativo (title).
=============================================================================*/
#contenido_admin .rossa-cal-viewbar {
  display: flex;
  flex: 0 0 auto;                    /* en calendar.php #contenido_admin es flex column */
  align-items: center;
  justify-content: flex-end;
  margin: 0 0 12px;
}
#contenido_admin .rossa-cal-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius-pill);
}
#contenido_admin .rossa-cal-switch__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  box-sizing: border-box;
  border-radius: var(--rossa-radius-pill);
  color: var(--rossa-muted);
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
}
#contenido_admin a.rossa-cal-switch__opt:hover,
#contenido_admin a.rossa-cal-switch__opt:focus {
  background: rgba(0, 94, 102, .08);
  color: var(--rossa-teal);
  text-decoration: none;
}
#contenido_admin .rossa-cal-switch__opt.is-active {
  background: var(--rossa-teal);
  color: var(--rossa-white);
  cursor: default;
}
/* Etiqueta accesible (no visible): el control es icon-only por diseño. */
#contenido_admin .rossa-cal-switch__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Vista lineal: el iframe ocupa el alto restante. El #root de calendar.php
   trae height:100% + flex:1; con la barra de vistas como hermana eso sumaría
   más del 100% y .bodycalendar (overflow:hidden) recortaría el iframe. */
#contenido_admin.rossa-cal-page #root {
  height: auto;
  min-height: 0;
}

/*=============================================================================
  51. ADD_RESERVA MÓVIL — resultados de disponibilidad (table.reservas_boards)
  ---------------------------------------------------------------------------
  La tabla se sirve con anchos en el marcado (columnas de 80+120+100+70px más la
  de estancia/uso) y cellspacing="6", que suman más que un viewport de 360-390px:
  según el dispositivo desborda con scroll horizontal (la columna "Precio" queda
  cortada) o el navegador comprime los controles hasta dejar el desplegable de
  Nº hab. en un cuadradito. Por debajo de 600px —el breakpoint en el que
  responsive.css ya pasa esta tabla a modo móvil— cada plan de tarifas se apila
  como una tarjeta y la tabla deja de maquetarse como tabla (display:block), que
  es lo que elimina el reparto de columnas y el cellspacing:
=============================================================================*/
@media (max-width: 600px) {
  /* Fuera del modelo de tabla: sin columnas compartidas ni border-spacing */
  #contenido_admin table.reservas_boards {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-spacing: 0;
    padding: 0;
  }
  #contenido_admin .reservas_boards thead,
  #contenido_admin .reservas_boards tbody,
  #contenido_admin .reservas_boards tr { display: block; width: auto; }
  #contenido_admin .reservas_boards td:not(.cabestancia) {
    display: block;
    box-sizing: border-box;
    width: auto;
  }
  #contenido_admin .reservas_boards td[width] { width: auto; }
  /* Columna "Estancia / uso": la oculta responsive.css; se reafirma aquí porque
     la regla de arriba (display:block) tiene más peso que la suya. */
  #contenido_admin .reservas_boards .cabestancia { display: none; }
  /* Cabecera de columnas y filas de relleno: sin función en modo apilado */
  #contenido_admin .reservas_boards thead tr.cab:has(.cabestancia) { display: none; }
  #contenido_admin .reservas_boards tr.tr_usos_boards_mov,
  #contenido_admin .reservas_boards tr.tr_empty { display: none; }

  /* Banda de fechas de la búsqueda */
  #contenido_admin .reservas_boards td.cabfechas { padding: 8px 12px !important; }

  /* Cabecera de estancia/uso: título y badge de capacidad sin cortarse */
  #contenido_admin .reservas_boards .cab_uso_reserva {
    padding: 10px 12px !important;
    border-radius: var(--rossa-radius) var(--rossa-radius) 0 0;
  }
  #contenido_admin .reservas_boards .cab_uso_reserva .uso-info { flex-wrap: wrap; gap: 6px 10px; }
  #contenido_admin .reservas_boards .cab_uso_reserva .uso-title { white-space: normal; }

  /* Tarjeta de tarifa: título + campos en una fila que envuelve */
  #contenido_admin .reservas_boards tr.tr_usos_boards {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 16px;
    margin-bottom: 6px;
    padding: 10px 12px 12px;
    background-color: rgba(32, 92, 104, .02);
    border-bottom: 1px solid var(--rossa-hairline-soft);
    border-radius: 0 0 var(--rossa-radius) var(--rossa-radius);
  }
  #contenido_admin .reservas_boards tr.tr_usos_boards > td {
    padding: 0 !important;      /* lydia: .reservas_boards tr td { padding: 5px 8px !important } */
    background-color: transparent !important;
    border: 0 !important;
  }
  /* Estancia mín/máx sin valor: no deja hueco */
  #contenido_admin .reservas_boards tr.tr_usos_boards > td:empty { display: none; }

  /* Título del plan de tarifas, a línea completa sobre los campos */
  #contenido_admin .reservas_boards tr.tr_usos_boards > td.cab_board_reserva {
    display: block;
    flex: 1 0 100%;
    margin-bottom: 2px;
    color: var(--rossa-ink);
    font-size: 13px;
  }
  #contenido_admin .reservas_boards tr.tr_usos_boards > td.cab_board_reserva strong { font-weight: 600; }

  /* Etiquetas por celda, en lugar del thead */
  #contenido_admin .reservas_boards tr.tr_usos_boards > td:not(.cab_board_reserva)::before {
    display: block;
    margin-bottom: 4px;
    color: var(--rossa-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
  }
  #contenido_admin .reservas_boards tr.tr_usos_boards > td.center::before          { content: "Min / máx."; }
  #contenido_admin .reservas_boards tr.tr_usos_boards > td.col_precio_hab::before  { content: "Precio / hab."; }
  #contenido_admin .reservas_boards tr.tr_usos_boards > td:has(select.num_habs)::before { content: "Nº hab."; }
  #contenido_admin .reservas_boards tr.tr_usos_boards > td.precios::before         { content: "Precio"; }

  /* Min/máx: línea propia bajo el título del plan (si compartiera línea con los
     campos, empujaría el importe a una segunda fila) y alineado a la izquierda
     como el resto: la celda viene con text-align:center para el modo tabla. */
  #contenido_admin .reservas_boards tr.tr_usos_boards > td.center {
    flex: 1 0 100%;
    text-align: left;
  }
  #contenido_admin .reservas_boards tr.tr_usos_boards > td.center .estminmax { display: inline-block; }

  /* Nº hab.: el desplegable se comprimía con la columna de 100px */
  #contenido_admin .reservas_boards tr.tr_usos_boards select.num_habs {
    width: auto;
    min-width: 68px;
  }

  /* Importe de la línea, al margen derecho de la tarjeta */
  #contenido_admin .reservas_boards tr.tr_usos_boards > td.precios {
    margin-left: auto;
    color: var(--rossa-ink);
    font-weight: 600;
    text-align: right;
  }

  /* Aire entre bloques de estancia */
  #contenido_admin .reservas_boards td.empty_separator {
    height: 10px;
    padding: 0 !important;
    line-height: 10px;
  }

  /* Pie: Total en una línea (concepto | importe) y botón a todo el ancho */
  #contenido_admin .reservas_boards tr:has(> td.total_reserva) {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }
  #contenido_admin .reservas_boards td.total_reserva,
  #contenido_admin .reservas_boards #precio_total_admin_res {
    font-size: 15px;
    font-weight: 600;
  }
}

/*=============================================================================
  52. ADD_RESERVA MÓVIL — paso 2, estancias y servicios (table.reservas_lineas)
  ---------------------------------------------------------------------------
  Mismo problema que §51 y peor consecuencia: la tabla pide ~440px (columnas
  40/20/25/15% + cellspacing) y como #contenido_admin recorta el desbordamiento
  en móvil, la columna "Precio", el TOTAL y parte del botón Siguiente quedaban
  fuera de la pantalla, sin scroll con el que llegar a ellos. Por debajo de
  600px la tabla se apila igual que la de disponibilidad
=============================================================================*/
@media (max-width: 600px) {
  #contenido_admin table.reservas_lineas {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-spacing: 0;
    padding: 0;
  }
  #contenido_admin .reservas_lineas tbody,
  #contenido_admin .reservas_lineas tr { display: block; width: auto; }
  #contenido_admin .reservas_lineas td {
    display: block;
    box-sizing: border-box;
    width: auto;
  }
  #contenido_admin .reservas_lineas td[width] { width: auto; }
  /* Cabecera de columnas (se repite por línea): las etiquetas van por celda */
  #contenido_admin .reservas_lineas tr.cab { display: none; }

  /* Fila principal de la línea: nombre del uso a línea completa y debajo
     plan / estancia / precio */
  #contenido_admin .reservas_lineas tr.tr_reservas_lineas:has(select.estancias_select) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
    padding: 10px 12px 12px;
  }
  #contenido_admin .reservas_lineas tr.tr_reservas_lineas:has(select.estancias_select) > td {
    padding: 0 !important;
    text-align: left !important;   /* las celdas vienen con align="center" */
    border: 0 !important;
  }
  #contenido_admin .reservas_lineas tr.tr_reservas_lineas:has(select.estancias_select) > td:first-child { flex: 1 0 100%; }
  #contenido_admin .reservas_lineas tr.tr_reservas_lineas:has(select.estancias_select) > td:first-child h3 { margin: 0 0 4px; }
  #contenido_admin .reservas_lineas tr.tr_reservas_lineas:has(select.estancias_select) > td:has(select.estancias_select) { flex: 1 1 150px; }
  #contenido_admin .reservas_lineas tr.tr_reservas_lineas:has(select.estancias_select) > td.precios {
    margin-left: auto;
    color: var(--rossa-ink);
    font-weight: 600;
    white-space: nowrap;
  }
  /* Etiquetas de las celdas que dejaron de tener cabecera */
  #contenido_admin .reservas_lineas tr.tr_reservas_lineas:has(select.estancias_select) > td:not(:first-child)::before {
    display: block;
    margin-bottom: 4px;
    color: var(--rossa-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
  }
  #contenido_admin .reservas_lineas tr.tr_reservas_lineas:has(select.estancias_select) > td:has(> strong)::before { content: "Plan de tarifas"; }
  #contenido_admin .reservas_lineas tr.tr_reservas_lineas:has(select.estancias_select) > td:has(select.estancias_select)::before { content: "Estancia"; }
  #contenido_admin .reservas_lineas tr.tr_reservas_lineas:has(select.estancias_select) > td.precios::before { content: "Precio"; }

  /* Suplementos por huésped: concepto | importe */
  #contenido_admin .reservas_lineas tr.tr_reservas_lineas:has(td.suplemento-precio) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
  }
  #contenido_admin .reservas_lineas tr.tr_reservas_lineas:has(td.suplemento-precio) > td { text-align: left !important; }
  #contenido_admin .reservas_lineas td.suplemento-precio { white-space: nowrap; font-weight: 600; }
  /* El fondo pasa a la fila: con él en cada celda, los bloques apilados se leen
     como pastillas sueltas en vez de una fila. */
  #contenido_admin .reservas_lineas tr.tr_reservas_lineas:has(select.estancias_select),
  #contenido_admin .reservas_lineas tr.tr_reservas_lineas:has(td.suplemento-precio),
  #contenido_admin .reservas_lineas tr:has(> td.total_reserva) { background-color: rgba(32, 92, 104, .02); }
  #contenido_admin .reservas_lineas tr.tr_reservas_lineas:has(select.estancias_select) > td,
  #contenido_admin .reservas_lineas tr.tr_reservas_lineas:has(td.suplemento-precio) > td,
  #contenido_admin .reservas_lineas tr:has(> td.total_reserva) > td { background-color: transparent !important; }

  /* Bloque de huéspedes: ya es flex por dentro, solo necesita el ancho */
  #contenido_admin .reservas_lineas tr.guests-tr > td { width: auto; }

  /* Pie: concepto a la izquierda, importe a la derecha */
  #contenido_admin .reservas_lineas tr:has(> td.total_reserva) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    padding: 4px 12px;
  }
  #contenido_admin .reservas_lineas tr:has(> td.total_reserva) > td { text-align: left !important; }
  #contenido_admin .reservas_lineas td.total_reserva h3 { margin: 0; }
  #contenido_admin .reservas_lineas #precio_total_admin_res,
  #contenido_admin .reservas_lineas #precio_total_descontado_res,
  #contenido_admin .reservas_lineas td.precios_descuento {
    margin-left: auto;          /* el importe del descuento cae en su propia línea */
    text-align: right !important;
    white-space: nowrap;
    font-weight: 600;
  }
  /* Los campos del descuento (tipo + concepto + valor) no caben junto a su
     etiqueta: línea propia. */
  #contenido_admin .reservas_lineas tr:has(> td.total_reserva) > td:has(.descuento-campos) { flex: 1 0 100%; }
  #contenido_admin .reservas_lineas #concepto_descuento { width: 100%; max-width: 100%; }
}

/*=============================================================================
  53. SCREEN: Reporte diario  (module=reporte_diario)
  ---------------------------------------------------------------------------
  Aquí la pantalla se ordena en tres piezas: cabecera con el selector de día en
  una sola línea, bloque de Limpieza (salidas | entradas en paralelo cuando hay
  sitio) y bloque de Comidas con su total. El marcado legacy se conserva; en el
  PHP solo se añadieron clases de anclaje (.rd-page, .rd-daybar, .rd-section,
  .rd-empty, .rd-total) y los avisos de tabla vacía.
=============================================================================*/

/* El reporte se lee centrado en la página: el título, el selector de día y los
   bloques comparten ancho (1100px) y se centran con márgenes automáticos, en vez
   de quedar pegados al borde izquierdo con el hueco a la derecha. */
#contenido_admin.rd-page #cont-config {
  max-width: 1100px;
  margin: 0 auto;
}

/* --- Selector de día: una sola línea, controles a la misma altura ---------- */
#contenido_admin.rd-page .rd-daybar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 1100px;
  margin: 14px auto 0;
  padding: 14px 16px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-sizing: border-box;
}
#contenido_admin.rd-page .rd-daybar__label {
  color: var(--rossa-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
  font-weight: 700;
}
#contenido_admin.rd-page .rd-daybar input[type="date"] {
  width: auto;
  min-height: 38px;
  margin: 0;
  box-sizing: border-box;
}
/* §12 pone los submit de formulario en display:block con márgenes automáticos:
   dentro de la barra vuelven a ser botones en línea. */
#contenido_admin.rd-page .rd-daybar input[type="submit"].admin_boton {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 38px;
  margin: 0;
  padding: 8px 18px;
}
/* "Volver a hoy" era una banda teal a todo el ancho: acción secundaria. */
#contenido_admin.rd-page .rd-daybar .rd-today.admin_boton {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 0;
  min-height: 38px;
  margin: 0;
  padding: 8px 16px;
  background-color: var(--rossa-white) !important;
  border: 1px solid var(--rossa-border);
  box-shadow: none;
  color: var(--rossa-muted) !important;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
#contenido_admin.rd-page .rd-daybar .rd-today.admin_boton:hover {
  border-color: var(--rossa-teal);
  color: var(--rossa-teal) !important;
}
/* el <br/> suelto tras el formulario ya no hace falta para separar */
#contenido_admin.rd-page #cont-config > br { display: none; }

/* --- Bloques de sección --------------------------------------------------- */
/* .rossa-ctr-block trae `max-width:560px` de ver_reserva: era lo que dejaba el
   reporte en una franja estrecha con media pantalla vacía a la derecha. */
#contenido_admin.rd-page .rd-section {
  width: 100%;
  max-width: 1100px;
  margin: 26px auto 0;
  padding: 0;
}
/* .rossa-ctr viene de ver_reserva (520px, centrado): aquí ocupa su bloque */
#contenido_admin.rd-page .rd-section .rossa-ctr {
  width: 100%;
  max-width: 1100px;
  align-items: stretch;
  padding: 0;
  font-size: inherit;
}
/* "Limpieza" / "Comidas" llegan como <h1>, compitiendo con el título de la
   pantalla: pasan a rótulo de sección. */
#contenido_admin.rd-page .rd-section .rossa-ctr > h1 {
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rossa-border);
  color: var(--rossa-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
}
#contenido_admin.rd-page .rd-section .rossa-ctr > h2 {
  margin: 0 0 8px;
  color: var(--rossa-teal);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
}
#contenido_admin.rd-page .rd-section .rossa-ctr > br { display: none; }

/* --- Tablas del reporte --------------------------------------------------- */
/* el contenedor de ver_reserva scrollea con un min-width pensado para las tablas
   de la reserva; estas tienen tres columnas y caben en su bloque */
#contenido_admin.rd-page .rossa-table__container {
  width: 100%;
  overflow-x: visible;
}
#contenido_admin.rd-page table.rossa-table {
  width: 100%;
  min-width: 0;
}
#contenido_admin.rd-page table.rossa-table th {
  color: var(--rossa-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
#contenido_admin.rd-page table.rossa-table td {
  color: var(--rossa-ink);
  font-size: 13.5px;
}
/* Día sin salidas / entradas / comidas: aviso en la propia tabla */
#contenido_admin.rd-page tr.rd-empty td {
  padding: 18px 10px;
  color: var(--rossa-muted);
  font-size: 13px;
  font-style: italic;
  text-align: center;
}
/* Total de comidas: cierra la tabla */
#contenido_admin.rd-page tr.rd-total td {
  border-top: 2px solid var(--rossa-border);
  color: var(--rossa-ink);
  font-weight: 700;
}

/* --- Escritorio ancho: salidas y entradas en paralelo ---------------------
   Los cuatro elementos (dos h2 y sus dos tablas) son hermanos directos del
   .rossa-ctr, así que se colocan por celdas en lugar de envolverlos en el PHP. */
@media (min-width: 1200px) {
  #contenido_admin.rd-page .rd-section--limpieza .rossa-ctr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
  }
  #contenido_admin.rd-page .rd-section--limpieza .rossa-ctr > h1 { grid-area: 1 / 1 / 2 / -1; }
  #contenido_admin.rd-page .rd-section--limpieza .rossa-ctr > h2:nth-of-type(1) { grid-area: 2 / 1 / 3 / 2; }
  #contenido_admin.rd-page .rd-section--limpieza .rossa-ctr > h2:nth-of-type(2) { grid-area: 2 / 2 / 3 / 3; }
  #contenido_admin.rd-page .rd-section--limpieza .rossa-ctr > .rossa-table__container:nth-of-type(1) { grid-area: 3 / 1 / 4 / 2; }
  #contenido_admin.rd-page .rd-section--limpieza .rossa-ctr > .rossa-table__container:nth-of-type(2) { grid-area: 3 / 2 / 4 / 3; }
}

/* --- Móvil ---------------------------------------------------------------- */
@media (max-width: 760px) {
  #contenido_admin.rd-page .rd-daybar {
    align-items: stretch;
    flex-direction: column;
    padding: 12px 14px;
  }
  #contenido_admin.rd-page .rd-daybar input[type="date"],
  #contenido_admin.rd-page .rd-daybar input[type="submit"].admin_boton,
  #contenido_admin.rd-page .rd-daybar .rd-today.admin_boton {
    width: 100%;
    justify-content: center;
    min-height: 44px;    /* objetivo táctil */
    box-sizing: border-box;
  }
  /* Tres columnas de texto corto: entran en un móvil si se les deja partir el
     rótulo (en escritorio van en una línea). Así se evita el scroll horizontal,
     que dejaba la hora fuera de vista. */
  #contenido_admin.rd-page table.rossa-table { min-width: 0; }
  #contenido_admin.rd-page table.rossa-table th {
    white-space: normal;
    font-size: 10px;
  }
  #contenido_admin.rd-page table.rossa-table th,
  #contenido_admin.rd-page table.rossa-table td { padding-left: 6px; padding-right: 6px; }
  #contenido_admin.rd-page table.rossa-table td { font-size: 12.5px; }
  #contenido_admin.rd-page .rd-section { margin-top: 20px; }
}

/*=============================================================================
  54. SCREEN: Apertura por llamada  (module=gsm_rtu5024)
  ---------------------------------------------------------------------------
  Listado de números autorizados en el dispositivo GSM-RTU5024. El módulo pinta
  cada número como .cuadro_gsm con el color de estado en un style inline
  (background-color desde PHP) dentro de un contenedor con height:800px y
  overflow:scroll, también inline: de ahí venían los bloques de color saturado y
  que parte de los registros quedara fuera de vista.
=============================================================================*/

#contenido_admin #cont-config:has(.gsm-filterbar) {
  max-width: 1180px;
  margin: 0 auto;
}
/* cabecera de la pantalla y rótulo de la configuración */
#contenido_admin #cont-config:has(.gsm-filterbar) > h2 {
  margin: 22px 0 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rossa-border);
  color: var(--rossa-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Aviso "los datos no se consultan al dispositivo": era un párrafo largo a todo
   lo ancho; pasa a nota con barra teal, como el resto del PMS. */
#contenido_admin #cont-config:has(.gsm-filterbar) > p:has(strong) {
  max-width: 1180px;
  box-sizing: border-box;
  margin: 20px 0;
  padding: 12px 16px;
  background: var(--rossa-tint);
  border-left: 3px solid var(--rossa-teal);
  border-radius: 0 var(--rossa-radius) var(--rossa-radius) 0;
  color: var(--rossa-ink);
  font-size: 12.5px;
  line-height: 1.5;
}

/* --- Tarjeta de configuración del dispositivo ----------------------------- */
#contenido_admin #gsm-config table.estandar {
  width: 100%;
  max-width: 1180px;
  margin: 12px 0 0 !important;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  border-collapse: separate;
  border-spacing: 0;
  padding: 6px 20px 18px;
  box-sizing: border-box;
}
#contenido_admin #gsm-config table.estandar .cab td {
  background: none !important;
  border: none !important;
  color: var(--rossa-ink) !important;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: left !important;
  text-transform: uppercase;
  padding: 12px 8px 10px !important;
}
#contenido_admin #gsm-config table.estandar td {
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rossa-border) !important;
  padding: 9px 8px !important;
  text-align: left !important;
  vertical-align: middle;
  color: var(--rossa-ink);
  font-size: 13px;
}
#contenido_admin #gsm-config table.estandar tbody tr:last-child td { border-bottom: 0 !important; }
/* los campos traen size="50px" en el marcado: caja uniforme y no infinita */
#contenido_admin #gsm-config table.estandar input[type="text"] {
  width: 100%;
  max-width: 380px;
  min-height: 36px;
  box-sizing: border-box;
}
#contenido_admin #gsm-config input[type="submit"].admin_boton {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 132px;
  margin: 16px 0 0;
}

/* --- Fila de formularios de mantenimiento --------------------------------- */
#contenido_admin .gsm-forms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 1180px;
  margin: 26px auto 0;
  align-items: start;
}
#contenido_admin .gsm-forms > form { margin: 0; }
/* Las tablas de estos formularios se ajustan a su contenido y se centran en la
   tarjeta: a ancho completo los campos quedaban amontonados a la izquierda con el
   hueco a la derecha. */
#contenido_admin .gsm-forms table.estandar {
  width: auto !important;
  max-width: 100%;
  margin: 0 auto !important;
}
#contenido_admin .gsm-forms table.estandar .cab td { text-align: left !important; }
#contenido_admin .gsm-forms table.estandar tbody td,
#contenido_admin .gsm-forms table.estandar thead td:not(.cab td) { text-align: center !important; }
/* rótulos de columna del alta, sobre su campo */
#contenido_admin .gsm-forms #add-user table.estandar thead tr:not(.cab) td {
  color: var(--rossa-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding-bottom: 2px !important;
}
/* Campos de fecha y hora: misma caja que el resto (llegaban con la altura mínima
   del control nativo y se leían como un campo de otra pantalla). */
#contenido_admin .gsm-forms input[type="datetime-local"],
#contenido_admin .gsm-forms input[type="date"],
#contenido_admin .gsm-forms input[type="time"] {
  min-width: 200px;
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-sizing: border-box;
  color: var(--rossa-ink);
  font-family: var(--rossa-font);
  font-size: 13px;
}
#contenido_admin .gsm-forms input[type="datetime-local"]:focus,
#contenido_admin .gsm-forms input[type="date"]:focus,
#contenido_admin .gsm-forms input[type="time"]:focus {
  outline: none;
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .12);
}
/* "Consultar reales" trae los rótulos dentro de la celda del campo */
#contenido_admin #inquiry-user-range table.estandar input[type="number"] {
  min-width: 150px;
  min-height: 38px;
  text-align: center;
}
/* dentro de cada tarjeta los campos se apilan a ancho completo */
#contenido_admin .gsm-forms table.estandar input[type="text"],
#contenido_admin .gsm-forms table.estandar input[type="number"],
#contenido_admin .gsm-forms table.estandar select {
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
}
#contenido_admin .gsm-forms table.estandar input[type="submit"].admin_boton,
#contenido_admin .gsm-forms input[type="submit"].admin_boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 120px;
  margin: 10px 0 0;
}
/* "Añadir usuario" mantiene sus 5 columnas en línea (con las celdas apiladas se
   perdía la correspondencia entre rótulo y campo, porque el thead va aparte),
   así que ocupa una fila entera del grid. */
#contenido_admin .gsm-forms > #add-user       { grid-column: 1 / -1; order: 1; }
#contenido_admin .gsm-forms > #del-by-id      { order: 2; }
#contenido_admin .gsm-forms > #inquiry-user-range { order: 3; }
#contenido_admin .gsm-forms #add-user table.estandar td { white-space: nowrap; }
#contenido_admin .gsm-forms #add-user table.estandar input[type="text"],
#contenido_admin .gsm-forms #add-user table.estandar input[type="number"],
#contenido_admin .gsm-forms #add-user table.estandar input[type="datetime-local"],
#contenido_admin .gsm-forms #add-user table.estandar select { min-width: 130px; }
#contenido_admin .gsm-forms #inquiry-user-range table.estandar td { padding: 6px 8px !important; }

/* --- Barra de leyenda + filtro -------------------------------------------- */
#contenido_admin .gsm-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  max-width: 1180px;
  margin: 0 0 20px;
  padding: 12px 16px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-sizing: border-box;
}
#contenido_admin .gsm-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* La separación entre casillas (28px) tiene que ser bastante mayor que la que
     hay entre cada casilla y su etiqueta (7px), o no se ve a qué estado pertenece
     cada una. */
  gap: 10px 28px;
}
#contenido_admin .gsm-legend__title,
#contenido_admin .gsm-search__label {
  color: var(--rossa-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
  font-weight: 700;
}
#contenido_admin .gsm-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--rossa-ink);
  font-size: 12.5px;
  cursor: pointer;
}
#contenido_admin .gsm-legend__item input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--rossa-teal);
  cursor: pointer;
}
/* el punto de color liga cada casilla con el acento de su tarjeta */
#contenido_admin .gsm-legend__item span::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 0;
}
#contenido_admin .gsm-legend__item--actual span::before    { background: var(--rossa-green); }
#contenido_admin .gsm-legend__item--pendiente span::before { background: var(--rossa-coral); }
#contenido_admin .gsm-legend__item--pasado span::before    { background: var(--rossa-border); }
#contenido_admin .gsm-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#contenido_admin .gsm-search select,
#contenido_admin .gsm-search input[type="text"],
#contenido_admin .gsm-search input[type="date"] {
  width: auto;
  min-height: 34px;
  margin: 0;
  box-sizing: border-box;
}
#contenido_admin .gsm-search input[type="text"] { min-width: 170px; }

/* --- Contenedor de columnas -----------------------------------------------
   El alto fijo con scroll interno escondía registros: la página crece y se
   recorre con el scroll normal. */
#contenido_admin .caja_apertura_por_llamada {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px 26px;
  height: auto !important;
  /* Este bloque y .gsm-forms cuelgan de #contenido_admin, no de #cont-config (que
     es quien centra la cabecera, la configuración y los filtros): se centran aquí
     para que los cinco bloques compartan borde izquierdo y derecho. */
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  overflow: visible !important;
  align-items: start;
}
#contenido_admin .numeros_custom,
#contenido_admin .numeros_reserva {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0 !important;
}
/* rótulos de columna: llegan como <h1> con width y center inline */
#contenido_admin .numeros_custom > h1,
#contenido_admin .numeros_reserva > h1 {
  width: auto !important;
  margin: 0 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rossa-border);
  color: var(--rossa-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: left !important;
  text-transform: uppercase;
}

/* --- Tarjeta de número ---------------------------------------------------- */
#contenido_admin .cuadro_gsm {
  position: relative;
  /* lydia fija `width:420px; height:106.5px`: la altura recortaba el número, las
     fechas y el botón de quitar, que quedaban fuera de la caja */
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 14px 12px 16px;
  background-color: var(--rossa-white) !important;   /* vence el color inline */
  border: 1px solid var(--rossa-border);
  border-left: 3px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-sizing: border-box;
  color: var(--rossa-ink);
  font-size: 13px;
  line-height: 1.5;
}
/* El estado, como acento y como chip: el texto lo pone el CSS porque el marcado
   solo trae la clase. */
#contenido_admin .cuadro_gsm::before {
  display: inline-block;
  align-self: flex-start;   /* el contenedor es flex column: sin esto se estira */
  margin-bottom: 8px;
  padding: 2px 9px;
  border-radius: var(--rossa-radius-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#contenido_admin .cuadro_gsm.num_actual { border-left-color: var(--rossa-green); }
#contenido_admin .cuadro_gsm.num_actual::before {
  content: "Con permiso";
  background: rgba(25, 172, 138, .12);
  color: #0f7a62;
}
#contenido_admin .cuadro_gsm.num_pendiente { border-left-color: var(--rossa-coral); }
#contenido_admin .cuadro_gsm.num_pendiente::before {
  content: "Pendiente";
  background: var(--rossa-salmon);
  color: #b8431f;
}
#contenido_admin .cuadro_gsm.num_pasado { border-left-color: var(--rossa-border); }
#contenido_admin .cuadro_gsm.num_pasado::before {
  content: "Caducado";
  background: var(--rossa-surface);
  color: var(--rossa-muted);
}
/* los datos, en filas: los spans traen float inline */
#contenido_admin .cuadro_gsm > span {
  display: block;
  float: none !important;
  text-align: left !important;
}
#contenido_admin .cuadro_gsm hr {
  margin: 8px 0;
  border: 0;
  border-top: 1px solid var(--rossa-border);
}
#contenido_admin .cuadro_gsm br { display: none; }
#contenido_admin .cuadro_gsm .nom_gsm { font-size: 14px; }
#contenido_admin .cuadro_gsm .num_gsm { font-variant-numeric: tabular-nums; }
#contenido_admin .cuadro_gsm .campo-nombre,
#contenido_admin .cuadro_gsm .id_gsm { color: var(--rossa-muted); }
#contenido_admin .cuadro_gsm .id_gsm { font-weight: 700; }
/* icono de renombrar: no admite clases nuevas (las lee el JS), solo caja */
#contenido_admin .cuadro_gsm img[name="boton_cambiar_nombre_gsm"] {
  vertical-align: -3px;
  cursor: pointer;
  opacity: .55;
}
#contenido_admin .cuadro_gsm img[name="boton_cambiar_nombre_gsm"]:hover { opacity: 1; }
/* formulario de renombrado, en línea */
#contenido_admin .cuadro_gsm .change_name_form input[type="text"] {
  width: 150px;
  min-height: 30px;
  padding: 4px 8px;
  box-sizing: border-box;
}
#contenido_admin .cuadro_gsm .change_name_form .admin_boton {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 0;
  min-height: 30px;
  margin: 0 0 0 4px;
  padding: 4px 12px;
  font-size: 12px;
}
/* "Eliminar": el marcado trae un div vacío dentro del enlace; aquí es el propio
   botón discreto, con el rojo reservado al hover. */
#contenido_admin .cuadro_gsm .del-extra-line {
  display: inline-block;
  width: auto !important;
  height: auto !important;
  padding: 3px 10px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  color: var(--rossa-muted);
  font-size: 11.5px;
  font-weight: 600;
}
#contenido_admin .cuadro_gsm .del-extra-line::before { content: "Quitar"; }
/* lydia le pone una X blanca sobre cuadro rojo con `::after`: sobra al ser texto */
#contenido_admin .cuadro_gsm .del-extra-line::after { content: none; }
#contenido_admin .cuadro_gsm a:hover .del-extra-line {
  background: var(--rossa-salmon);
  border-color: var(--rossa-red);
  color: var(--rossa-red);
}

/* --- Orden interno de la tarjeta de número --------------------------------
   El marcado son spans sueltos con float inline; se identifican por lo que
   contienen (.id_gsm, .num_gsm, .fec_*_gsm, .del-extra-line) y se ordenan como
   ficha: estado + id arriba, nombre, teléfono, vigencia y la acción al pie. */
#contenido_admin .cuadro_gsm {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* El hueco para el ID (que va anclado arriba a la derecha) solo lo necesitan las
   filas superiores: con padding en toda la ficha, el separador y el botón se
   quedaban a 74px del borde derecho mientras el texto arrancaba a 16 del
   izquierdo, y la tarjeta se leía descuadrada. */
#contenido_admin .cuadro_gsm .gsm-name-row,
#contenido_admin .cuadro_gsm > span:first-of-type { padding-right: 62px; }
#contenido_admin .cuadro_gsm > span:has(.id_gsm) {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 11.5px;
}
#contenido_admin .cuadro_gsm > span:has(.num_gsm) { order: 3; }
#contenido_admin .cuadro_gsm > span:has(.fec_ini_gsm) { order: 4; }
#contenido_admin .cuadro_gsm > span:has(.fec_fin_gsm) { order: 5; }
#contenido_admin .cuadro_gsm > span:has(.del-extra-line) {
  order: 6;
  align-self: flex-end;
  margin-top: 8px;
  color: transparent;          /* oculta el texto "Eliminar:" del marcado */
  font-size: 0;
}
#contenido_admin .cuadro_gsm > span:has(.fec_ini_gsm),
#contenido_admin .cuadro_gsm > span:has(.fec_fin_gsm) {
  color: var(--rossa-muted);
  font-size: 12px;
}

/* --- Formularios inferiores (eliminar por id / añadir / consultar) --------- */
#contenido_admin #del-by-id table.estandar,
#contenido_admin #add-user table.estandar,
#contenido_admin #inquiry-user-range table.estandar {
  width: 100%;
  max-width: 1180px;
  margin: 0 0 22px !important;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  border-collapse: separate;
  border-spacing: 0;
  padding: 6px 18px 16px;
  box-sizing: border-box;
}
#contenido_admin #del-by-id table.estandar .cab td,
#contenido_admin #add-user table.estandar .cab td,
#contenido_admin #inquiry-user-range table.estandar .cab td {
  background: none !important;
  border: none !important;
  color: var(--rossa-ink) !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: left !important;
  text-transform: uppercase;
  padding: 12px 8px 10px !important;
}
#contenido_admin #del-by-id table.estandar td,
#contenido_admin #add-user table.estandar td,
#contenido_admin #inquiry-user-range table.estandar td {
  background-color: transparent !important;
  border: 0 !important;
  padding: 6px 8px !important;
  text-align: left !important;
  vertical-align: middle;
}

/* --- Móvil ---------------------------------------------------------------- */
@media (max-width: 900px) {
  #contenido_admin .caja_apertura_por_llamada { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  #contenido_admin .cuadro_gsm { padding: 12px 12px 12px 14px; }
  /* §21 baja los h1 de contenido a 20px con !important: los rótulos de columna
     de esta pantalla llegan como h1 y deben seguir leyéndose como rótulos */
  #contenido_admin .numeros_custom > h1,
  #contenido_admin .numeros_reserva > h1 { font-size: 12.5px !important; }
  #contenido_admin .gsm-forms { grid-template-columns: minmax(0, 1fr); }
  #contenido_admin .gsm-forms > #add-user { overflow-x: visible; }
  #contenido_admin .gsm-forms #add-user table.estandar { min-width: 0; }
  #contenido_admin .gsm-forms table.estandar,
  #contenido_admin .gsm-forms table.estandar tbody,
  #contenido_admin .gsm-forms table.estandar tr,
  #contenido_admin .gsm-forms table.estandar td {
    display: block;
    width: auto !important;
    box-sizing: border-box;
  }
  #contenido_admin .gsm-forms table.estandar thead { display: block; }
  /* la 1ª .cab es el título de la tarjeta; la 2ª son los rótulos de columna */
  #contenido_admin .gsm-forms #add-user table.estandar thead tr.cab + tr.cab { display: none; }
  #contenido_admin .gsm-forms table.estandar td {
    padding: 4px 8px !important;
    text-align: left !important;
    white-space: normal !important;
  }
  /* Las etiquetas se cuelgan del campo que contiene cada celda, no de su posición:
     la fila trae un <input type="hidden"> suelto como hijo del <tr> y la columna
     "ID reserva" la oculta el JS, así que nth-child no cuadra. */
  #contenido_admin .gsm-forms #add-user tbody td:has(select),
  #contenido_admin .gsm-forms #add-user tbody td:has(input:not([type="hidden"])):not(:has(input[type="submit"]))::before,
  #contenido_admin .gsm-forms #add-user tbody td:has(select)::before {
    display: block;
    margin: 8px 0 4px;
    color: var(--rossa-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  #contenido_admin .gsm-forms #add-user tbody td:has(#user-id)::before    { content: "ID"; }
  #contenido_admin .gsm-forms #add-user tbody td:has(#user-name)::before  { content: "Nombre (opcional)"; }
  #contenido_admin .gsm-forms #add-user tbody td#res-id::before           { content: "ID reserva (opcional)"; }
  #contenido_admin .gsm-forms #add-user tbody td:has(#user-phone)::before { content: "Número de teléfono"; }
  #contenido_admin .gsm-forms #add-user tbody td:has(#user-from)::before  { content: "Desde (opcional)"; }
  #contenido_admin .gsm-forms #add-user tbody td:has(#user-to)::before    { content: "Hasta (opcional)"; }
  /* la celda del botón no lleva etiqueta */
  #contenido_admin .gsm-forms #add-user tbody td:has(input[type="submit"])::before { content: none; }
  /* controles a ancho completo y con objetivo táctil */
  #contenido_admin .gsm-forms table.estandar input[type="text"],
  #contenido_admin .gsm-forms table.estandar input[type="number"],
  #contenido_admin .gsm-forms table.estandar input[type="datetime-local"],
  #contenido_admin .gsm-forms table.estandar select {
    width: 100% !important;
    min-width: 0 !important;
    /* §18 limita los text/number/select a 320px: por encima de ese ancho se
       quedaban cortos frente a los campos de fecha y al botón, que sí crecen */
    max-width: 100% !important;
    min-height: 44px;
  }
  #contenido_admin .gsm-forms table.estandar input[type="submit"].admin_boton {
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
  }
  /* "Consultar reales" trae sus dos campos en celdas con el rótulo dentro */
  #contenido_admin #inquiry-user-range table.estandar input[type="number"] { text-align: left; }
  #contenido_admin .gsm-filterbar { flex-direction: column; align-items: stretch; }
  #contenido_admin .gsm-search { flex-wrap: wrap; }
  #contenido_admin .gsm-search input[type="text"] { flex: 1 1 auto; min-width: 0; }
  #contenido_admin .cuadro_gsm .change_name_form input[type="text"] { width: 100%; }
  #contenido_admin #del-by-id table.estandar,
  #contenido_admin #add-user table.estandar,
  #contenido_admin #inquiry-user-range table.estandar { padding: 6px 12px 14px; }
}

/*=============================================================================
  55. SCREEN: Gestión de reservas — vista de tarjetas  (module=gestor_pedidos)
  ---------------------------------------------------------------------------
  vistas_reservas.php pinta cada reserva dos veces: .rossa-card__container
  (tarjetas) y .rossa-table__container (tabla), y oculta una de las dos con
  .rossa-none según 'current-view' de la cookie de filtros. Aquí se restila la
  vista de tarjetas, que venía del diseño anterior: recuadro de 270px fijo con
  cabecera "de carpeta" fuera del borde, triángulo oscuro en pico, badge de pago
  de 40px pisando la esquina y tabla interna con zebra gris y fuente monospace.
=============================================================================*/

#contenido_admin .rossa__typeview {
  width: fit-content;
  gap: 2px;
  padding: 3px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius-pill);
}
#contenido_admin .rossa__typeview .rossa__view {
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: transparent;
  border-radius: var(--rossa-radius-pill);
  color: var(--rossa-muted);
  font: 600 12.5px/1 var(--rossa-font);
  opacity: 1;
}
/* El icono y el rótulo los pintan ::before/::after de aquí abajo, así que
   cualquier icono que venga en el marcado se oculta: antes era un <img>, y al
   convertirlo a máscara (.rossa-i) se colaba un SEGUNDO icono al lado. */
#contenido_admin .rossa__typeview .rossa__view img,
#contenido_admin .rossa__typeview .rossa__view .rossa-i,
#contenido_admin .rossa__typeview .rossa__view > i { display: none; }
#contenido_admin .rossa__typeview .rossa__view::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;         mask-repeat: no-repeat;
  -webkit-mask-position: center;          mask-position: center;
  -webkit-mask-size: contain;             mask-size: contain;
}
#contenido_admin .rossa__typeview .rossa__view::after { font: inherit; }
#contenido_admin .rossa__typeview .rossa__view[data-view="0"]::before {
  -webkit-mask-image: url("https://cdn.rossa.app/icons/id-card.svg");
  mask-image: url("https://cdn.rossa.app/icons/id-card.svg");
}
#contenido_admin .rossa__typeview .rossa__view[data-view="0"]::after { content: "Tarjetas"; }
#contenido_admin .rossa__typeview .rossa__view[data-view="1"]::before {
  -webkit-mask-image: url("https://cdn.rossa.app/icons/table-properties.svg");
  mask-image: url("https://cdn.rossa.app/icons/table-properties.svg");
}
#contenido_admin .rossa__typeview .rossa__view[data-view="1"]::after { content: "Tabla"; }
#contenido_admin .rossa__typeview .rossa__view:hover { color: var(--rossa-ink); }
#contenido_admin .rossa__typeview .rossa__typeview-current {
  background: var(--rossa-tint);
  color: var(--rossa-teal);
}

/* --- Rejilla de tarjetas --------------------------------------------------
   El flex centrado dejaba la última fila descolgada en el medio y las tarjetas
   con alturas distintas. Grid de ancho mínimo: filas parejas y alineadas a la
   izquierda. Sin !important para que .rossa-none siga pudiendo ocultarla. */
#contenido_admin .rossa-card__container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 16px;
  align-items: stretch;
  justify-content: start;
  margin-top: 4px;
}

/* --- La ficha -------------------------------------------------------------- */
#contenido_admin .rossa-card__container .rossa-bkg {
  width: auto;
  position: relative;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: 10px;
  color: var(--rossa-ink);
  font-size: 13px;
}
/* cabecera: dentro del borde, sin pico ni pestaña */
#contenido_admin .rossa-bkg .rossa-bkg__header {
  height: auto;
  padding: 12px 14px 0;
  box-sizing: border-box;
}
#contenido_admin .rossa-bkg .rossa-bkg__content-header { width: 100%; }
#contenido_admin .rossa-bkg .rossa-bkg__info {
  gap: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
#contenido_admin .rossa-bkg .rossa-bkg__content {
  height: auto;
  padding: 0;
  margin: 0;
  background-color: transparent;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  text-align: left;
}
#contenido_admin .rossa-bkg .rossa-bkg__title {
  color: var(--rossa-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#contenido_admin .rossa-bkg .rossa-bkg__id > span:last-child,
#contenido_admin .rossa-bkg .rossa-bkg__paytry > span:last-child {
  font-weight: 700;
  font-size: 13.5px;
}
#contenido_admin .rossa-bkg .rossa-bkg__triangle,
#contenido_admin .rossa-bkg .rossa-bkg__child-triangle { display: none; }

/* cuerpo: el borde y el radio ya los pone la ficha */
#contenido_admin .rossa-bkg .rossa-bkg__body {
  position: static;              /* el badge de pago se ancla a la ficha */
  justify-content: flex-start;
  align-items: stretch;
  padding: 6px 14px 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
}

/* --- Estado del pago ------------------------------------------------------
   Era un círculo de 40px colgado sobre la esquina; se recoloca en la cabecera
   y se recorta. El disco de color y su punto coral son §46 / pagina_inicio. */
#contenido_admin .rossa-bkg .rossa-bkg__status {
  position: absolute;
  top: 12px;
  right: 14px;
  width: auto;
  height: auto;
}
#contenido_admin .rossa-bkg .rossa-bkg__status .rossa-card-tag {
  width: 30px;
  height: 30px;
  font-size: 11.5px;
}
#contenido_admin .rossa-bkg .rossa-bkg__status .rossa-card-tag-pagado    { background-color: var(--rossa-green); }
#contenido_admin .rossa-bkg .rossa-bkg__status .rossa-card-tag-no-pagado { background-color: var(--rossa-coral); }
#contenido_admin .rossa-bkg .rossa-bkg__status .rossa-card-tag-normal    { background-color: var(--rossa-ink); }
/* hueco del badge para que no pise el Id. Pago */
#contenido_admin .rossa-bkg .rossa-bkg__header { padding-right: 54px; }

#contenido_admin .booking-status {
  min-width: 0;
  padding: 3px 10px;
  border-radius: var(--rossa-radius-pill);
  font: 600 12px/1.5 var(--rossa-font);
  white-space: nowrap;
}
#contenido_admin .booking-status.status-confirmed { background-color: #dcf2ec; color: #0d6b57; }
#contenido_admin .booking-status.status-cancelled { background-color: var(--rossa-salmon); color: var(--rossa-coral); }
#contenido_admin .booking-status.status-noshow    { background-color: #fdeebc; color: #8a6a1d; }
#contenido_admin .booking-status.status-deleted   { background-color: var(--rossa-surface); color: var(--rossa-ink); }
#contenido_admin .booking-status.status-unknown   { background-color: var(--rossa-surface); color: var(--rossa-muted); }

/* --- Cliente --------------------------------------------------------------- */
#contenido_admin .rossa-bkg .rossa-bkg__client {
  width: auto;
  height: auto;
  gap: 1px;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--rossa-border);
}
#contenido_admin .rossa-bkg .rossa-bkg__client a {
  color: var(--rossa-cyan);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
#contenido_admin .rossa-bkg .rossa-bkg__client a:hover { text-decoration: underline; }

/* --- Datos de la reserva (tabla interna) ----------------------------------
   Zebra gris y bordes blancos de 5px fuera; filas clave-valor con separador
   fino. Los <span> heredaban monospace de una regla legacy. */
#contenido_admin .rossa-bkg table.rossa-table--bkg {
  margin: 0;
  border-collapse: collapse;
  font-size: 12.5px;
}
#contenido_admin .rossa-bkg table.rossa-table--bkg tr { background-color: transparent; }
/* la ficha ya se lee como lista: el zebra de §18 (.rossa-table--bkg even td)
   partía cada dato en una banda de color */
#contenido_admin .rossa-bkg table.rossa-table--bkg th,
#contenido_admin .rossa-bkg table.rossa-table--bkg td {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--rossa-border);
  padding: 8px 0;
  vertical-align: middle;
}
#contenido_admin .rossa-bkg table.rossa-table--bkg tr:last-child th,
#contenido_admin .rossa-bkg table.rossa-table--bkg tr:last-child td { border-bottom: 0; }
#contenido_admin .rossa-bkg table.rossa-table--bkg th {
  width: 40%;
  color: var(--rossa-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.35;
  text-align: left;
  text-transform: uppercase;
}
#contenido_admin .rossa-bkg table.rossa-table--bkg td {
  color: var(--rossa-ink);
  text-align: right;
}
#contenido_admin .rossa-bkg table.rossa-table--bkg td span,
#contenido_admin .rossa-bkg table.rossa-table--bkg td { font-family: var(--rossa-font); }
#contenido_admin .rossa-bkg table.rossa-table--bkg td { font-variant-numeric: tabular-nums; }
/* precio: última fila, es el dato que se busca de un vistazo */
#contenido_admin .rossa-bkg table.rossa-table--bkg tr:last-child td {
  color: var(--rossa-teal);
  font-size: 14px;
  font-weight: 700;
}
/* iconos de origen (42px en el marcado) y chips de habitación, a la derecha */
#contenido_admin .rossa-bkg .origen_res img {
  width: 26px;
  height: 26px;
  vertical-align: middle;
}
#contenido_admin .rossa-bkg .rossa-box-habs {
  max-width: none;
  gap: 4px;
  justify-content: flex-end;
}

/* --- Acciones -------------------------------------------------------------- */
#contenido_admin .rossa-bkg .rossa-bkg__buttons {
  gap: 8px;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-top: 12px;
}
#contenido_admin .rossa-bkg .rossa-bkg__buttons > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* la ficha traía dos rellenos a la vez: verde legacy (#00a886, .rossa-btn) en
   "Reserva" y teal (§23 fuerza .rossa-btn--negative) en "Reubicar", sin decir
   cuál es la acción principal. Aquí se jerarquiza: primario teal + secundario de
   contorno; "Eliminar" (.rossa-btn--red) ya es el destructivo. El !important es
   para vencer a §23, que declara --negative con !important.
   El mismo par de colores se aplica a la vista de tabla (.rossa-table__container),
   que pinta los mismos botones: las dos vistas del listado comparten código de
   color. El destructivo también coincide: la papelera de la tabla (.rossa-trash)
   ya usa salmón + coral, igual que el "Eliminar" de la ficha. */
#contenido_admin .rossa-bkg .rossa-bkg__buttons .rossa-btn--border,
#contenido_admin .rossa-table__container td .rossa-btn--border {
  background: var(--rossa-teal) !important;
  border: 1px solid var(--rossa-teal) !important;
  color: var(--rossa-white) !important;
}
#contenido_admin .rossa-bkg .rossa-bkg__buttons .rossa-btn--border:hover,
#contenido_admin .rossa-table__container td .rossa-btn--border:hover { background: #00474d !important; }
#contenido_admin .rossa-bkg .rossa-bkg__buttons .rossa-btn--negative,
#contenido_admin .rossa-table__container td .rossa-btn--negative {
  background: var(--rossa-white) !important;
  border: 1px solid var(--rossa-border) !important;
  color: var(--rossa-ink) !important;
}
#contenido_admin .rossa-bkg .rossa-bkg__buttons .rossa-btn--negative:hover,
#contenido_admin .rossa-table__container td .rossa-btn--negative:hover { background: var(--rossa-surface) !important; }

/* --- Sin resultados -------------------------------------------------------
   El marcado repite la ficha vacía (con su cabecera Nº / Id. Pago); ocupa la
   fila entera y se queda solo con el mensaje. */
#contenido_admin .rossa-bkg:has(.rossa-bkg-noreserva) { grid-column: 1 / -1; }
#contenido_admin .rossa-bkg:has(.rossa-bkg-noreserva) .rossa-bkg__header { display: none; }
#contenido_admin .rossa-bkg .rossa-bkg-noreserva {
  margin: 0;
  padding: 34px 0;
  color: var(--rossa-muted);
  font-size: 13.5px;
  font-weight: 600;
}

/* --- Desplegable de filtros (solo móvil, ≤600px por gestion_reservas.css) --
   Era una barra azul oscuro que se ponía roja al pulsar; pasa a control neutro
   como el resto de la pantalla. El chevron es un <i> de FA que §32 pinta como
   máscara Lucide. */
#contenido_admin #filter-dropdown {
  padding: 11px 14px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  color: var(--rossa-ink);
  font-size: 13px;
  font-weight: 600;
}
#contenido_admin #filter-dropdown:active { background-color: var(--rossa-tint); }
#contenido_admin #filter-dropdown i { color: var(--rossa-teal); }

/* --- Móvil ---------------------------------------------------------------- */
@media (max-width: 700px) {
  #contenido_admin .rossa-card__container { grid-template-columns: minmax(0, 1fr); }
  /* con 5 pestañas la última salta de línea: la fila incompleta se alinea con
     las demás en vez de quedarse centrada */
  #contenido_admin .rossa-slider .rossa-slider__tab-box { justify-content: flex-start; }
  #contenido_admin .rossa-slider .rossa-slider__tab-box .rossa-slider__tab { flex: 0 0 auto; }
  /* acciones a ancho completo: son el objetivo táctil de la ficha */
  #contenido_admin .rossa-bkg .rossa-bkg__buttons,
  #contenido_admin .rossa-bkg .rossa-bkg__buttons > div { width: 100%; }
  #contenido_admin .rossa-bkg .rossa-bkg__buttons .rossa-btn,
  #contenido_admin .rossa-bkg .rossa-bkg__buttons .admin_boton {
    flex: 1 1 auto;
    min-height: 40px;
    text-align: center;
  }
  #contenido_admin .rossa__typeview { width: 100%; }
  #contenido_admin .rossa__typeview .rossa__view { flex: 1 1 0; justify-content: center; }
}

/*=============================================================================
  56. DIÁLOGO DE CONFIRMACIÓN (jQuery UI dialog: eliminar reserva)
  ---------------------------------------------------------------------------
  gestor_pedidos confirma con diálogos de jQuery UI (#del-dialog, #error-dialog).
  §19 ya reviste el marco, pero los botones de estos no van en
  el .ui-dialog-buttonpane: están dentro del contenido y el JS les aplica
  .button(), que los convierte en .ui-button — con .ui-state-default (§19: blanco
  + contorno) los dos acababan idénticos, sin decir cuál era la acción
  destructiva, a 17.6px (1.1em de .ui-widget) frente a los 12px del texto, y con
  el alto inline del dialog dejando un hueco vacío bajo los botones.
=============================================================================*/

/* --- Marco, velo y aspa --------------------------------------------------- */
.ui-widget-overlay {
  background: var(--rossa-ink);
  opacity: .45;
}
.ui-dialog .ui-dialog-titlebar { padding: 13px 16px; }
.ui-dialog .ui-dialog-title {
  color: var(--rossa-ink);
  font-size: 14.5px;
  font-weight: 700;
}
/* la aspa venía del sprite del tema: pastilla discreta con la X del tipo */
.ui-dialog .ui-dialog-titlebar-close {
  width: 26px;
  height: 26px;
  margin-top: -13px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
}
.ui-dialog .ui-dialog-titlebar-close:hover { background: var(--rossa-surface); }
.ui-dialog .ui-dialog-titlebar-close .ui-icon {
  width: 26px;
  height: 26px;
  margin: 0;
  background: none;                     /* fuera el sprite */
  text-indent: 0;
  overflow: hidden;
  color: transparent;                   /* oculta el texto "close" del marcado */
  font-size: 0;
}
.ui-dialog .ui-dialog-titlebar-close .ui-icon::before {
  content: "✕";
  display: block;
  color: var(--rossa-muted);
  font-size: 14px;
  line-height: 26px;
  text-align: center;
}
.ui-dialog .ui-dialog-titlebar-close:hover .ui-icon::before { color: var(--rossa-ink); }

/* --- Contenido ------------------------------------------------------------
   El alto inline (dialog({height:300})) dejaba aire muerto; se ajusta al texto
   con techo de pantalla para los diálogos largos. */
.ui-dialog .ui-dialog-content {
  height: auto !important;
  max-height: 72vh;
  padding: 16px;
  color: var(--rossa-ink);
  font-size: 13.5px;
  line-height: 1.5;
}
.ui-dialog .ui-dialog-content > p { margin: 0 0 8px; }
/* botones sueltos dentro del contenido: a la escala del texto, no a 1.1em */
.ui-dialog .ui-dialog-content button.admin_boton,
.ui-dialog .ui-dialog-content button.ui-button {
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
}

/* --- Par de confirmación (eliminar / cancelar reserva) --------------------
   Dos botones tras un <br>: se ordenan como botonera de mitades. Los <p>
   ocupan la fila completa y el <br> deja de contar. */
#del-dialog.ui-dialog-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  align-content: start;
}
#del-dialog.ui-dialog-content > p { grid-column: 1 / -1; }
#del-dialog.ui-dialog-content > br { display: none; }
#del-dialog.ui-dialog-content > button {
  width: 100%;
  margin: 6px 0 0;
  box-sizing: border-box;
  text-align: center;
}
/* el diálogo enfoca su primer botón al abrirse y el anillo del navegador salía
   como un contorno negro grueso sobre el destructivo */
#del-dialog.ui-dialog-content > button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(234, 92, 54, .22);
}
#del-dialog #cancel-del:focus { box-shadow: 0 0 0 3px rgba(0, 94, 102, .18); }

/* la aclaración ("eliminar no es lo mismo que cancelar") es contexto, no orden */
#del-dialog.ui-dialog-content > p:last-of-type {
  color: var(--rossa-muted);
  font-size: 12.5px;
}
/* acción destructiva: los ids ganan a .ui-widget-content .ui-state-default */
#del-dialog #eliminar {
  background: var(--rossa-salmon);
  border: 1px solid #f6d6cd;
  color: var(--rossa-coral);
}
#del-dialog #eliminar:hover { background: #fbe0d8; }
/* vuelta atrás: secundario de contorno */
#del-dialog #cancel-del {
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  color: var(--rossa-ink);
}
#del-dialog #cancel-del:hover { background: var(--rossa-surface); }

/* --- Móvil ---------------------------------------------------------------- */
@media (max-width: 700px) {
  /* el ancho lo fija el JS (width:450) y desbordaba la pantalla */
  .ui-dialog {
    max-width: calc(100vw - 24px);
    left: 12px !important;
  }
  #del-dialog.ui-dialog-content { grid-template-columns: minmax(0, 1fr); }
}

/*=============================================================================
  57. BARRA DE FILTROS DE GESTIÓN DE RESERVAS  (#rossa-filters)
  ---------------------------------------------------------------------------
  Los ocho filtros comparten un único juego de controles para las cinco
  pestañas (el JS los reconfigura al cambiar de tab). El contenedor era un flex
  sin gap donde cada filtro medía lo que midiera el texto de sus opciones (de
  117px "Origen" a 422px "Fecha de"), con los rótulos sangrados 10px y los
  controles a 28px de alto: de ahí la sensación de campos descolocados y de
  distinto tamaño.
=============================================================================*/
#contenido_admin #rossa-filters {
  gap: 14px 16px;
  margin: 12px 0 18px;
  padding: 16px;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  box-sizing: border-box;
  /* por arriba: el bloque de fechas ocupa dos líneas y con `end` arrastraba los
     rótulos de su fila a distinta altura */
  align-items: flex-start;
}
/* flex-grow 0: con grow, un filtro que se quedaba solo en su fila estiraba su
   control a todo el ancho del panel (desplegables de un extremo a otro y un
   selector de fecha gigante). Cada filtro ocupa su columna y el sobrante queda
   como aire a la derecha. */
#contenido_admin #rossa-filters .filter-container {
  flex: 0 1 210px;
  min-width: 0;
  gap: 5px;
}
/* "Buscar por" (select + campo) pide dos columnas */
#contenido_admin #rossa-filters .filter-container:has(#select-search) { flex: 0 1 436px; }
/* "Fecha de" arranca en su propia línea: son tres o cuatro controles y, colgando
   al final de la fila de selects, su segunda línea quedaba descolgada a la
   derecha. Ocupa la fila entera, pero sus controles siguen midiendo una columna. */
#contenido_admin #rossa-filters .filter-container:has(#select-dates) { flex: 0 0 100%; }

/* rótulos */
#contenido_admin #rossa-filters .filter-title {
  padding-left: 0;
  color: var(--rossa-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* controles: misma caja para todos, sin heredar el ancho del texto */
#contenido_admin #rossa-filters select.rossa-input,
#contenido_admin #rossa-filters input.rossa-input {
  width: 100%;
  min-width: 0;
  max-width: none;
  /* min-height y no height: dentro de .filter-container-inside (flex en fila) el
     navegador ignora height en estos controles y quedaban 5px más bajos */
  min-height: 36px;
  padding: 6px 10px;
  box-sizing: border-box;
  font-size: 13px;
}
#contenido_admin #rossa-filters select.rossa-input { padding-right: 26px; }

/* "Buscar por": el select manda y el campo de valor ocupa el resto */
#contenido_admin #rossa-filters .filter-container-inside {
  gap: 8px;
  align-items: stretch;
  justify-content: flex-start;
}
#contenido_admin #rossa-filters .filter-container-inside > #select-search { flex: 0 1 210px; }
#contenido_admin #rossa-filters .filter-container-inside > input.rossa-input { flex: 0 1 210px; }

/* "Fecha de": tipo y operador arriba, la fecha (o el par) debajo */
#contenido_admin #rossa-filters .filter-container-dates {
  gap: 8px;
  /* flex-start: con "Entre" el par de fechas hace la línea más alta y con
     stretch los dos selects se estiraban a esa altura */
  align-items: flex-start;
}
#contenido_admin #rossa-filters .filter-container-dates { flex-wrap: wrap; }
#contenido_admin #rossa-filters .filter-container-dates > #select-dates    { flex: 0 1 210px; }
#contenido_admin #rossa-filters .filter-container-dates > #select-operator { flex: 0 1 210px; }
#contenido_admin #rossa-filters .filter-box-dates {
  flex: 0 0 auto;                        /* en la fila del tipo y el operador */
  gap: 8px;
  flex-wrap: nowrap;                     /* las dos fechas de "Entre", una al lado de otra */
}
/* la fecha mantiene su caja aunque sea el único campo visible (con "Entre" hay
   dos y ocupan las dos mitades de la fila) */
#contenido_admin #rossa-filters .filter-box-dates > input.rossa-input { flex: 0 1 210px; }

/* El filtro "Estado reservas" se retiró en gestor_pedidos.php, pero el JS lo
   reponía al entrar en Canceladas / Eliminadas con .css("display",""); el
   !important lo mantiene fuera de la vista sin sacarlo del DOM (el JS lee su
   valor al enviar los filtros). */
#contenido_admin #rossa-filters .filter-container--deleted { display: none !important; }

/* --- Resetear filtros -----------------------------------------------------
   Acción secundaria de la barra: iba en el verde legacy de .rossa-btn, más
   llamativo que los propios filtros. */
#contenido_admin #btn-reset-filters {
  background: var(--rossa-white) !important;
  border: 1px solid var(--rossa-border) !important;
  color: var(--rossa-ink) !important;
  font-size: 13px;
  font-weight: 600;
}
#contenido_admin #btn-reset-filters:hover { background: var(--rossa-surface) !important; }

/* --- Reservas por página --------------------------------------------------
   Vive fuera de la barra, sobre el listado; se alinea con el mismo lenguaje. */
#contenido_admin .filter-box-perpage {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 10px;
  color: var(--rossa-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#contenido_admin .filter-box-perpage input.rossa-input {
  width: 68px !important;                /* el marcado trae style="width:50px" */
  height: 32px;
  padding: 4px 8px;
  box-sizing: border-box;
  color: var(--rossa-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
}

/* --- Móvil ---------------------------------------------------------------
   Bajo 600px la barra vive dentro del acordeón #filter-dropdown: una columna,
   controles a ancho completo y altura táctil. Aquí NO se toca `display`: lo
   gobierna el inline del JS. */
@media (max-width: 700px) {
  #contenido_admin #rossa-filters {
    flex-direction: column;
    gap: 12px;
    padding: 14px;
  }
  #contenido_admin #rossa-filters .filter-container,
  #contenido_admin #rossa-filters .filter-container:has(#select-search),
  #contenido_admin #rossa-filters .filter-container:has(#select-dates) {
    flex: 1 1 auto;
    width: 100%;
  }
  #contenido_admin #rossa-filters select.rossa-input,
  #contenido_admin #rossa-filters input.rossa-input { min-height: 40px; }
  /* en columna estrecha el select de "Buscar por" no necesita reservar 190px */
  #contenido_admin #rossa-filters .filter-container-inside { flex-wrap: wrap; }
  #contenido_admin #rossa-filters .filter-container-inside > #select-search { flex: 1 1 100%; }
  #contenido_admin #rossa-filters .filter-container-inside > input.rossa-input { flex: 1 1 100%; }
  #contenido_admin #rossa-filters .filter-container-dates > #select-dates,
  #contenido_admin #rossa-filters .filter-container-dates > #select-operator,
  #contenido_admin #rossa-filters .filter-box-dates,
  #contenido_admin #rossa-filters .filter-box-dates > input.rossa-input { flex: 1 1 100%; }
  #contenido_admin #rossa-filters .filter-box-dates { flex-wrap: wrap; }
}

/*=============================================================================
  58. USO DE LA INTERFAZ (module=uso_botones)
  ---------------------------------------------------------------------------
  Ranking de pulsaciones por elemento (tabla rossa_track_counters). Pantalla
  interna de modo dios: superficie plana, acento teal y una barra proporcional
  detrás de la cifra para leer el reparto de un vistazo.
=============================================================================*/
#contenido_admin .rossa-uso-intro {
  color: var(--rossa-muted);
  max-width: 70ch;
  margin: 0 0 18px;
}

/* Resumen: cifras planas, sin caja ni sombra (criterio "flat" del rediseño) */
#contenido_admin .rossa-uso-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin: 0 0 22px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--rossa-border);
}
#contenido_admin .rossa-uso-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#contenido_admin .rossa-uso-kpi__n {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--rossa-teal);
  font-variant-numeric: tabular-nums;
}
#contenido_admin .rossa-uso-kpi__t {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--rossa-muted);
}

#contenido_admin .rossa-uso-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0 0 20px;
}
/* Los selects del admin traen anchos elásticos de lydia.css: aquí los fijamos
   para que la fila no se estire hasta el borde. */
#contenido_admin .rossa-uso-filtros > * { flex: 0 0 auto; }
#contenido_admin .rossa-uso-filtros select { max-width: 240px; }
/* lydia.css:1177 le pone margin-left/right:auto a .admin_boton; dentro de un
   flex eso se come todo el espacio libre y separaba los botones a los bordes. */
#contenido_admin .rossa-uso-filtros .admin_boton {
  margin-left: 0;
  margin-right: 0;
}
#contenido_admin .rossa-uso-filtros label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--rossa-muted);
  margin: 0 -4px 0 6px;
}
/* Clase propia en vez de .rossa-btn--default: esa está forzada a teal con
   !important más arriba (§ botones), y aquí el secundario va blanco con borde. */
#contenido_admin .rossa-uso-filtros .rossa-uso-reset {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
  color: var(--rossa-ink);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
#contenido_admin .rossa-uso-filtros .rossa-uso-reset:hover { background: var(--rossa-surface); }

/* Columna de cifras: la barra va detrás, el número encima y tabular para que
   los dígitos queden alineados entre filas. */
#contenido_admin .rossa-uso-tabla td.rossa-uso-num {
  position: relative;
  text-align: right;
  white-space: nowrap;
  min-width: 170px;
}
/* Mismo petrol que --rossa-tint / --rossa-zebra, con más alpha: a .04 la barra
   no se distinguía del fondo de la fila. Sin borde: redondeado dibujaba un
   arco que parecía un paréntesis suelto. */
#contenido_admin .rossa-uso-barra {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  min-width: 3px;
  border-radius: 3px;
  background: rgba(32, 92, 104, .14);
  pointer-events: none;
}
#contenido_admin .rossa-uso-n {
  position: relative;
  font-weight: 600;
  color: var(--rossa-ink);
  font-variant-numeric: tabular-nums;
}

#contenido_admin .rossa-uso-ir {
  color: var(--rossa-cyan);
  font-weight: 700;
  text-decoration: none;
}
#contenido_admin .rossa-uso-ir:hover { text-decoration: underline; }

/* Resalte temporal del elemento al llegar desde el listado (?rossa_goto=).
   Fuera de #contenido_admin a propósito: el destino puede estar en el menú o
   en la barra superior, no solo en el área de contenido. */
.rossa-track-goto {
  outline: 2px solid var(--rossa-teal) !important;
  outline-offset: 3px;
  border-radius: var(--rossa-radius);
  animation: rossa-track-latido 1.1s ease-in-out 3;
}
@keyframes rossa-track-latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 94, 102, .40); }
  50%      { box-shadow: 0 0 0 7px rgba(0, 94, 102, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .rossa-track-goto { animation: none; }
}

/* Pista de localización, no dato de agregación: el contador es por elemento */
#contenido_admin .rossa-uso-donde {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--rossa-muted);
}
#contenido_admin .rossa-uso-clave {
  font-size: 12px;
  color: var(--rossa-muted);
  word-break: break-all;
}
/* Clave derivada del texto: sobrevive peor a un rediseño, se avisa en la fila */
#contenido_admin .rossa-uso-debil {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--rossa-radius-pill);
  background: var(--rossa-salmon);
  color: var(--rossa-coral);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
  vertical-align: middle;
}

#contenido_admin .rossa-uso-vacio,
#contenido_admin .rossa-uso-nota {
  color: var(--rossa-muted);
}
#contenido_admin .rossa-uso-nota {
  font-size: 12px;
  margin-top: 12px;
}

@media (max-width: 700px) {
  #contenido_admin .rossa-uso-resumen { gap: 22px; }
  #contenido_admin .rossa-uso-kpi__n { font-size: 22px; }
  #contenido_admin .rossa-uso-filtros label { margin-left: 0; }
}

/*=============================================================================
  59. BUSCADOR DEL MENÚ LATERAL  (admin/includes/menu_buscador.php)
   60. Email de usuario — pantalla set_email + estados de confirmación
  ---------------------------------------------------------------------------
  Caja de búsqueda bajo "Ocultar". Al escribir, #menu recibe .rossa-menusearch-on:
  se oculta el menú normal y se enseña <ul class="panel_admin rossa-menusearch__results">,
  una lista PLANA de coincidencias. No se abren los grupos a propósito: en PC son
  flyouts flotantes y varios abiertos a la vez se solaparían.
  La lista de resultados lleva también la clase .panel_admin para heredar el
  aspecto de los enlaces del menú (lydia.css) sin duplicar estilos.
=============================================================================*/
.rossa-menusearch { padding: 10px 12px 6px; }
/* Etiqueta solo para lectores de pantalla */
.rossa-menusearch__label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.rossa-menusearch__box { position: relative; display: block; }
.rossa-menusearch__ico {
  position: absolute;
  left: 9px; top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--rossa-muted);
  pointer-events: none;
}
.rossa-menusearch__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 26px 7px 28px;
  font-family: var(--rossa-font);
  font-size: 13px;
  color: var(--rossa-ink);
  background: #fff;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  outline: none;
}
.rossa-menusearch__input::placeholder { color: var(--rossa-muted); }
.rossa-menusearch__input:focus {
  border-color: var(--rossa-teal);
  box-shadow: 0 0 0 2px rgba(0, 94, 102, .15);
}
/* La "x" nativa de type=search duplicaría nuestro botón de limpiar */
.rossa-menusearch__input::-webkit-search-cancel-button,
.rossa-menusearch__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.rossa-menusearch__clear {
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  display: none;
  padding: 4px 6px;
  border: 0;
  background: none;
  color: var(--rossa-muted);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.rossa-menusearch__clear:hover { color: var(--rossa-ink); }
#menu.rossa-menusearch-has .rossa-menusearch__clear { display: block; }

/* Modo resultados */
.rossa-menusearch__results { display: none; }
#menu.rossa-menusearch-on > ul.panel_admin:not(.rossa-menusearch__results) { display: none; }
#menu.rossa-menusearch-on .rossa-menusearch__results { display: block; }
/* Las filas del menú son de una línea y con alto fijo; un resultado lleva dos
   (etiqueta + grupo) y hay que dejarlo crecer o se solapan entre sí. */
#menu .rossa-menusearch__results a.rossa-menusearch__hit {
  height: auto;
  min-height: 0;
  line-height: 1.25;
  padding-top: 9px;
  padding-bottom: 9px;
  align-items: center;
  overflow: visible;
}
/* El enlace del menú es un flex "icono | etiqueta". La etiqueta y el grupo van
   juntos en una columna propia; si el grupo cuelga como hermano flex, su texto
   largo deja la etiqueta a 0px de ancho (el enlace tiene overflow:hidden). */
#menu .rossa-menusearch__results .rossa-menusearch__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
#menu .rossa-menusearch__results .rossa-menusearch__body .txtmenu { min-width: 0; }
/* Los resultados van SOLO TEXTO (decisión de diseño): la fila se clona del
   enlace real del menú, así que arrastra su <i>. Se oculta aquí en vez de
   filtrarlo en el JS del buscador (regla: no tocar el JS existente). Al caer
   el icono se recuperan sus 52px (45px de caja + 7px de margen, lydia.css
   .panel_admin a .fas), que se reparten entre sangría y ancho de etiqueta. */
#menu .rossa-menusearch__results a.rossa-menusearch__hit > i,
#menu .rossa-menusearch__results a.rossa-menusearch__hit > .fas,
#menu .rossa-menusearch__results a.rossa-menusearch__hit > .far { display: none; }
#menu .rossa-menusearch__results a.rossa-menusearch__hit { padding-left: 14px; }
#menu .rossa-menusearch__results a.rossa-menusearch__hit.is-sel {
  background: rgba(0, 94, 102, .08);
  box-shadow: inset 2px 0 0 var(--rossa-teal);
}
.rossa-menusearch__ctx {
  display: block;
  margin-top: 2px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--rossa-muted);
}
.rossa-menusearch__empty {
  padding: 12px 14px;
  font-size: 12px;
  color: var(--rossa-muted);
}

/* El buscador solo existe con el menú desplegado en pantalla grande: con el raíl
   colapsado no cabe (y al pasar el ratón tampoco vuelve, a propósito), y en móvil
   se navega de otra forma. El JS limpia la búsqueda cuando la caja deja de verse,
   para no dejar el menú atascado en la lista de resultados. */
body.showhidemenu #menu .rossa-menusearch { display: none; }
body.mobile #menu .rossa-menusearch { display: none; }
@media (max-width: 700px) {
  #menu .rossa-menusearch { display: none; }
}

/*=============================================================================
  60. SELECTOR DE ICONO DE SERVICIO  (module=add_servicio)
  ---------------------------------------------------------------------------
  Sustituye al campo de texto donde había que teclear la clave del icono: una
  rejilla con el catálogo (reserva::getListIconsServices) + subida de imagen
  propia, que se guarda como "img:<fichero>" (servicios::ICONO_ARCHIVO).
=============================================================================*/
#contenido_admin .rossa-icosel { display: block; }
/* Aviso para los valores heredados que no son del catálogo ni una imagen subida */
#contenido_admin .rossa-icosel__aviso {
  margin: 0 0 10px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--rossa-ink);
  background: var(--rossa-salmon);
  border-left: 3px solid var(--rossa-coral);
  border-radius: var(--rossa-radius);
}
#contenido_admin .rossa-icosel__aviso code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px;
}
#contenido_admin .rossa-icosel__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
#contenido_admin .rossa-icosel__opt {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 84px;
  min-height: 68px;
  padding: 9px 6px;
  background: #fff;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  color: var(--rossa-ink);
  font-family: var(--rossa-font);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#contenido_admin .rossa-icosel__opt:hover { border-color: var(--rossa-teal); }
#contenido_admin .rossa-icosel__opt.is-on {
  border-color: var(--rossa-teal);
  box-shadow: inset 0 0 0 1px var(--rossa-teal);
}
#contenido_admin .rossa-icosel__ico {
  font-size: 20px;
  line-height: 1;
  color: var(--rossa-teal);
}
#contenido_admin .rossa-icosel__ico i { font-size: 20px; }
#contenido_admin .rossa-icosel__txt {
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  color: var(--rossa-muted);
}
#contenido_admin .rossa-icosel__opt.is-on .rossa-icosel__txt { color: var(--rossa-ink); }

#contenido_admin .rossa-icosel__subir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--rossa-border);
}
#contenido_admin .rossa-icosel__subir label {
  font-size: 12px;
  color: var(--rossa-ink);
}
#contenido_admin .rossa-icosel__subir label small { color: var(--rossa-muted); font-weight: 400; }

#contenido_admin .rossa-icosel__actual {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--rossa-surface);
  border-radius: var(--rossa-radius);
}
#contenido_admin .rossa-icosel__actual.is-hidden { display: none; }
#contenido_admin .rossa-icosel__actual-lbl { font-size: 12px; color: var(--rossa-muted); }
#contenido_admin .rossa-icosel__img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}
#contenido_admin .rossa-icosel__quitar {
  appearance: none;
  border: 1px solid var(--rossa-border);
  background: #fff;
  color: var(--rossa-coral);
  border-radius: var(--rossa-radius);
  font: 600 11px/1 var(--rossa-font);
  padding: 6px 10px;
  cursor: pointer;
}
#contenido_admin .rossa-icosel__quitar:hover { border-color: var(--rossa-coral); }

/* Icono propio de un servicio allí donde se pinte (servicios::renderIcono) */
.rossa-servicio-ico {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  object-fit: contain;
  vertical-align: -0.2em;
}

/*=============================================================================
  53. «SELECCIONAR TODOS» — checkbox de cabecera de las tablas legacy
  ---------------------------------------------------------------------------
  Antes era un <span id="seltodos" class="admin_link">Seleccionar todos</span>:
  texto azul que alternaba a "Deseleccionar todos". Ahora es un checkbox real +
  <label for>, que es lo que se espera encima de una tabla con casilla por fila.
  El id y la clase .admin_link SE MANTIENEN: el handler de
  admin/js/Lydia_Script.js se engancha a #seltodos y sigue marcando /
  desmarcando los .selarticulo igual que antes. Su llamada a .html() cae ahora
  sobre el input, donde es inocua; el rótulo lo pinta el <label>, que ya no
  cambia de texto porque el estado lo dice la propia casilla.
  Sitios: admin/ver_codigo.php y admin/includes/botonera_buscador.php.
=============================================================================*/
.rossa-selall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}
.rossa-selall .rossa-selall__box {
  -webkit-appearance: checkbox;
  appearance: auto;                 /* que no se lo coma ningún reset de formularios */
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--rossa-teal);
  cursor: pointer;
  flex: 0 0 auto;
}
/* .admin_link (lydia) pone negrita y azul #06C; el rótulo va como texto normal. */
.rossa-selall .rossa-selall__txt {
  font-family: var(--rossa-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--rossa-ink);
  cursor: pointer;
  user-select: none;
}

/*=============================================================================
  54. RETIRADA DE ICONOS RASTER  (PNG/GIF -> SVG del CDN)
  ---------------------------------------------------------------------------
  Los iconos de interfaz dejan de ser mapas de bits. Dos técnicas según cómo
  esté montado cada sitio:

  (A) `.rossa-i` — para los <img> que ERAN el icono: en el PHP se sustituyen por
      <i class="rossa-i rossa-i--X">. Se pinta como máscara teñida con
      currentColor, así hereda el color del contexto (igual que §32). El tamaño
      se hereda del font-size, por eso los sitios que lo necesitan lo fijan
      inline (`style="font-size:50px"`) o con un modificador de abajo.

  (B) Sustitución de la URL de fondo — cuando el icono es DECORACIÓN dentro de
      un elemento que ya tiene su propio fondo (botones, inputs). Aquí no se
      puede usar máscara sin comerse el fondo del botón, así que se cambia solo
      `background-image` al SVG del CDN. No se puede teñir: se ve en el
      #5C7C84 que trae el archivo.

  NOTA: varias referencias del inventario resultaron ser CÓDIGO COMENTADO y no
  se tocan (lydia.css `.error div` y `#add_nostock`, admin/servicios.php entero,
  los `huespedes-gris` de ver_reserva.php). Los <img> que construye el JS
  (clientes.js, contactos.js, articulos.js, estancias.js, menu.js, atributos.js)
  se resuelven al final de esta sección con selectores de atributo, porque el JS
  existente no se toca.
=============================================================================*/

/* (A) base + modificadores -------------------------------------------------- */
.rossa-i {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;    mask-repeat: no-repeat;
  -webkit-mask-position: center;     mask-position: center;
  -webkit-mask-size: contain;        mask-size: contain;
}
.rossa-i--alerta      { -webkit-mask-image: url("https://cdn.rossa.app/icons/triangle-alert.svg");            mask-image: url("https://cdn.rossa.app/icons/triangle-alert.svg"); }
.rossa-i--ok          { -webkit-mask-image: url("https://cdn.rossa.app/icons/circle-check.svg");              mask-image: url("https://cdn.rossa.app/icons/circle-check.svg"); }
.rossa-i--tabla       { -webkit-mask-image: url("https://cdn.rossa.app/icons/table-properties.svg");          mask-image: url("https://cdn.rossa.app/icons/table-properties.svg"); }
.rossa-i--carpeta     { -webkit-mask-image: url("https://cdn.rossa.app/icons/Carpeta-abierta.svg");           mask-image: url("https://cdn.rossa.app/icons/Carpeta-abierta.svg"); }
.rossa-i--reserva     { -webkit-mask-image: url("https://cdn.rossa.app/icons/calendar-check.svg");            mask-image: url("https://cdn.rossa.app/icons/calendar-check.svg"); }
.rossa-i--calendario  { -webkit-mask-image: url("https://cdn.rossa.app/icons/calendar-days.svg");             mask-image: url("https://cdn.rossa.app/icons/calendar-days.svg"); }
.rossa-i--precio      { -webkit-mask-image: url("https://cdn.rossa.app/icons/Precio.svg");                    mask-image: url("https://cdn.rossa.app/icons/Precio.svg"); }
.rossa-i--huespedes   { -webkit-mask-image: url("https://cdn.rossa.app/icons/users.svg");                     mask-image: url("https://cdn.rossa.app/icons/users.svg"); }
.rossa-i--checkin-ok  { -webkit-mask-image: url("https://cdn.rossa.app/icons/user-round-check.svg");           mask-image: url("https://cdn.rossa.app/icons/user-round-check.svg"); }
.rossa-i--checkin     { -webkit-mask-image: url("https://cdn.rossa.app/icons/square-arrow-right-enter.svg");   mask-image: url("https://cdn.rossa.app/icons/square-arrow-right-enter.svg"); }
.rossa-i--asignar     { -webkit-mask-image: url("https://cdn.rossa.app/icons/bed-double.svg");                mask-image: url("https://cdn.rossa.app/icons/bed-double.svg"); }
.rossa-i--tarjeta     { -webkit-mask-image: url("https://cdn.rossa.app/icons/credit-card.svg");               mask-image: url("https://cdn.rossa.app/icons/credit-card.svg"); }
.rossa-i--puerta-ok   { -webkit-mask-image: url("https://cdn.rossa.app/icons/door-open.svg");                 mask-image: url("https://cdn.rossa.app/icons/door-open.svg"); }
.rossa-i--puerta-no   { -webkit-mask-image: url("https://cdn.rossa.app/icons/door-closed-locked.svg");        mask-image: url("https://cdn.rossa.app/icons/door-closed-locked.svg"); }
.rossa-i--info        { -webkit-mask-image: url("https://cdn.rossa.app/icons/info.svg");                      mask-image: url("https://cdn.rossa.app/icons/info.svg"); }
.rossa-i--pdf         { -webkit-mask-image: url("https://cdn.rossa.app/icons/scroll-text.svg");               mask-image: url("https://cdn.rossa.app/icons/scroll-text.svg"); }
.rossa-i--multimedia  { -webkit-mask-image: url("https://cdn.rossa.app/icons/image.svg");                     mask-image: url("https://cdn.rossa.app/icons/image.svg"); }
.rossa-i--camara      { -webkit-mask-image: url("https://cdn.rossa.app/icons/camera.svg");                    mask-image: url("https://cdn.rossa.app/icons/camera.svg"); }
.rossa-i--cancelar    { -webkit-mask-image: url("https://cdn.rossa.app/icons/circle-x.svg");                  mask-image: url("https://cdn.rossa.app/icons/circle-x.svg"); }
.rossa-i--canal-admin { -webkit-mask-image: url("https://cdn.rossa.app/icons/laptop.svg");                    mask-image: url("https://cdn.rossa.app/icons/laptop.svg"); }
/* Partes de viajero: los botones de activar/desactivar envío llevaban el icono de
   huéspedes, que no dice nada del trámite. Pasan al carné de identidad. */
.rossa-i--partes      { -webkit-mask-image: url("https://cdn.rossa.app/icons/id-card.svg");                   mask-image: url("https://cdn.rossa.app/icons/id-card.svg"); }
/* Variante "inactiva" (era Cancel-icon-grey.png). */
.rossa-i--apagado     { color: var(--rossa-muted); }
.rossa-i--aplicar     { -webkit-mask-image: url("https://cdn.rossa.app/icons/check-check.svg");               mask-image: url("https://cdn.rossa.app/icons/check-check.svg"); }
/* Ayuda de la página del huésped (class.pageBooking.php) */
.rossa-i--wifi        { -webkit-mask-image: url("https://cdn.rossa.app/icons/house-wifi.svg");                mask-image: url("https://cdn.rossa.app/icons/house-wifi.svg"); }
.rossa-i--parking     { -webkit-mask-image: url("https://cdn.rossa.app/icons/circle-parking.svg");            mask-image: url("https://cdn.rossa.app/icons/circle-parking.svg"); }
.rossa-i--codigos     { -webkit-mask-image: url("https://cdn.rossa.app/icons/Accesos%20y%20cerraduras.svg");  mask-image: url("https://cdn.rossa.app/icons/Accesos%20y%20cerraduras.svg"); }
.rossa-i--horarios    { -webkit-mask-image: url("https://cdn.rossa.app/icons/clock.svg");                     mask-image: url("https://cdn.rossa.app/icons/clock.svg"); }
.rossa-i--localizacion{ -webkit-mask-image: url("https://cdn.rossa.app/icons/map-pin.svg");                   mask-image: url("https://cdn.rossa.app/icons/map-pin.svg"); }
.rossa-i--nofumar     { -webkit-mask-image: url("https://cdn.rossa.app/icons/cigarette-off.svg");             mask-image: url("https://cdn.rossa.app/icons/cigarette-off.svg"); }

/* Tamaños de los sitios que sustituyen imágenes grandes. El <img> se dimensionaba
   por caja (width/height); un .rossa-i se dimensiona por font-size. */
.rossa-i--50 { font-size: 50px; }
.rossa-i--40 { font-size: 40px; }
.rossa-i--30 { font-size: 30px; }
.rossa-i--25 { font-size: 25px; }
.rossa-i--16 { font-size: 16px; }
/* Las clases de tamaño legacy que llevaban los <img> sustituidos siguen en el
   marcado (regla de oro nº2) y ahora dan el tamaño desde aquí. */
#contenido_admin .rossa-i.rossa-stay-icon,
#contenido_admin .rossa-i.rossa-reubicacion-img { font-size: 34px; width: 1em; height: 1em; }
#contenido_admin .rossa-i.btnfa { font-size: 16px; }

/* (A) iconos de sección de ver reserva — mismo patrón que .rossa-ctr__icon--timeline
   de §12. Solo se ven con el modo tabs desactivado: body.rossa-tabs-on los oculta. */
.rossa-ctr__icon--client,
.rossa-ctr__icon--comunicaciones,
.rossa-ctr__icon--payment,
.rossa-ctr__icon--booking,
.rossa-ctr__icon--guests,
.rossa-ctr__icon-huesped {
  background-image: none;
  background-color: var(--rossa-teal);
  -webkit-mask-repeat: no-repeat;    mask-repeat: no-repeat;
  -webkit-mask-position: center;     mask-position: center;
  -webkit-mask-size: contain;        mask-size: contain;
}
.rossa-ctr__icon--client         { -webkit-mask-image: url("https://cdn.rossa.app/icons/circle-user.svg");     mask-image: url("https://cdn.rossa.app/icons/circle-user.svg"); }
.rossa-ctr__icon--comunicaciones { -webkit-mask-image: url("https://cdn.rossa.app/icons/mails.svg");           mask-image: url("https://cdn.rossa.app/icons/mails.svg"); }
.rossa-ctr__icon--payment        { -webkit-mask-image: url("https://cdn.rossa.app/icons/euro.svg");            mask-image: url("https://cdn.rossa.app/icons/euro.svg"); }
.rossa-ctr__icon--booking        { -webkit-mask-image: url("https://cdn.rossa.app/icons/calendar-check.svg");   mask-image: url("https://cdn.rossa.app/icons/calendar-check.svg"); }
.rossa-ctr__icon--guests         { -webkit-mask-image: url("https://cdn.rossa.app/icons/users-round.svg");      mask-image: url("https://cdn.rossa.app/icons/users-round.svg"); }
.rossa-ctr__icon-huesped         { -webkit-mask-image: url("https://cdn.rossa.app/icons/users.svg");            mask-image: url("https://cdn.rossa.app/icons/users.svg"); }
/* Aviso de la ficha: el ::before pintaba alert.png de fondo. */
.rossa-notice-new::before {
  background-image: none;
  background-color: var(--rossa-coral);
  -webkit-mask: url("https://cdn.rossa.app/icons/triangle-alert.svg") no-repeat center / 45px;
          mask: url("https://cdn.rossa.app/icons/triangle-alert.svg") no-repeat center / 45px;
}

/* (B) sustitución de la URL de fondo ---------------------------------------- */
/* El raíl ya pinta su chevron como máscara en §10, pero el PNG de lydia seguía
   detrás (background: url(ocultarmenu.png) 70% 0%) asomando como una flecha suelta. */
#menu #hidemenu,
#menu.hidden #hidemenu { background-image: none; }
/* Selector de categorías (lydia): flechas de mover entre listas. */
#addcats  { background-image: url("https://cdn.rossa.app/icons/chevron-right.svg"); background-size: 14px; }
#delcats  { background-image: url("https://cdn.rossa.app/icons/chevron-left.svg");  background-size: 14px; }
#btnup    { background-image: url("https://cdn.rossa.app/icons/chevron-up.svg");    background-size: 14px; }
#btndown  { background-image: url("https://cdn.rossa.app/icons/chevron-down.svg");  background-size: 14px; }
/* Input con autocompletado y precio por habitación. */
.sugg_auto       { background-image: url("https://cdn.rossa.app/icons/search.svg"); background-size: 15px; }
.precio_por_hab  { background-image: url("https://cdn.rossa.app/icons/euro.svg");    background-size: 13px; }
/* Botón de check-in radix (el tamaño y la posición ya los fija §18). */
#contenido_admin a.rdx_btn { background-image: url("https://cdn.rossa.app/icons/id-card.svg"); }

/* (C) <img> que construye el JS — no se toca el script, se sustituye la imagen
   por la máscara desde CSS. `content:""` vacía el mapa de bits del <img> y el
   fondo teñido + máscara pintan el icono nuevo. Se acota por el final del src
   para no pillar otras imágenes. */
img[src$="/del.png"],
img[src$="/delete.png"],
img[src$="/delete_negra.png"],
img[src$="/delete_roja.png"],
img[src$="/icon-ok.png"],
img[src$="/candado.png"],
img[src$="/candado_gris.png"],
img[src$="/up.gif"],
img[src$="/down.gif"] {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;    mask-repeat: no-repeat;
  -webkit-mask-position: center;     mask-position: center;
  -webkit-mask-size: contain;        mask-size: contain;
}
img[src$="/del.png"],
img[src$="/delete.png"],
img[src$="/delete_negra.png"],
img[src$="/delete_roja.png"] { -webkit-mask-image: url("https://cdn.rossa.app/icons/trash-2.svg");     mask-image: url("https://cdn.rossa.app/icons/trash-2.svg"); }
img[src$="/icon-ok.png"]     { -webkit-mask-image: url("https://cdn.rossa.app/icons/circle-check.svg"); mask-image: url("https://cdn.rossa.app/icons/circle-check.svg"); }
img[src$="/candado.png"]     { -webkit-mask-image: url("https://cdn.rossa.app/icons/lock.svg");         mask-image: url("https://cdn.rossa.app/icons/lock.svg"); }
img[src$="/candado_gris.png"]{ -webkit-mask-image: url("https://cdn.rossa.app/icons/lock-open.svg");    mask-image: url("https://cdn.rossa.app/icons/lock-open.svg"); }
img[src$="/up.gif"]          { -webkit-mask-image: url("https://cdn.rossa.app/icons/chevron-up.svg");   mask-image: url("https://cdn.rossa.app/icons/chevron-up.svg"); }
img[src$="/down.gif"]        { -webkit-mask-image: url("https://cdn.rossa.app/icons/chevron-down.svg"); mask-image: url("https://cdn.rossa.app/icons/chevron-down.svg"); }
img[src$="/del.png"],
img[src$="/delete_roja.png"] { color: var(--rossa-coral); }
/*------------------------------------------------- 60. EMAIL DE USUARIO
  Pantalla forzada `set_email` (clon de change_insecure_password, que sigue en
  admin/css/lydia.css:6898) y los estados de confirmación del email en el gestor de
  usuarios, la ficha y el editor. Todo aditivo: no se toca ninguna regla legacy.
  ---------------------------------------------------------------------------- */

/* --- pantalla forzada set_email --- */
#contenido_admin.setemail .campos label {
  display: block;
  margin-bottom: 4px;
  color: var(--rossa-ink);
  font-weight: 600;
}
#contenido_admin.setemail .campos input[type="email"] {
  max-width: 360px;
}
#contenido_admin.setemail .setemail_ayuda {
  margin-top: 18px;
  color: var(--rossa-muted);
  font-size: 13px;
}
/* Salida legítima: la pantalla de contraseña insegura no la tiene y deja al
   usuario sin forma de desconectar. */
#contenido_admin.setemail .setemail_salir {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--rossa-border);
  font-size: 13px;
}
#contenido_admin.setemail .setemail_salir a {
  color: var(--rossa-red);
}

/* --- estado de confirmación en el editor de usuario --- */
.rossa-email-state {
  margin: 6px 0 0;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rossa-email-state--ok      { color: var(--rossa-green); }
.rossa-email-state--pending { color: var(--rossa-coral); }

/* Botón que parece enlace: reenviar la confirmación va dentro del formulario, así
   que tiene que ser un <button type="submit"> y no un <a>. */
.rossa-btn--link {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 4px;
  color: var(--rossa-cyan);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.rossa-btn--link:hover { color: var(--rossa-teal); }

/* --- iconos de estado en listados y ficha --- */
.rossa-email-ok      { color: var(--rossa-green); }
.rossa-email-pending { color: var(--rossa-coral); }

/* Emails largos no deben empujar la tabla de usuarios. */
.rossa-users-email {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/*=============================================================================
  61. TIPOGRAFÍA UNIFICADA — Work Sans en todo el PMS
  ---------------------------------------------------------------------------
  La fuente base del admin la fijaba `admin/css/lydia.css:1270`
  (`body{font-family:Verdana,Arial,Helvetica,sans-serif}`) y rossa.css nunca
  declaraba fuente en `body`: todo lo que no tocaba explícitamente el rediseño
  se renderizaba en Verdana. Aquí se fija Work Sans como base y se recuperan,
  uno a uno, los selectores legacy que declaran fuente propia y por tanto
  seguirían ganando a la herencia.

  FUERA DE ESTA SECCIÓN a propósito:
   · Correos (modules/user_management/files/emails/*, `content_style` de TinyMCE
     en comunicaciones): Work Sans no está garantizada en clientes de correo.
   · PDF (mpdf): necesita la fuente embebida, no es CSS.
   · Diapositivas de «vístete» (.theme_1…5): tipografía decorativa elegida por
     el cliente, incluida la 'Passion One' del theme 2.
   · Todos los `monospace` intencionados (consolas de debug, editores de código,
     hashes y columnas de importe).
=============================================================================*/

/* Base. Misma especificidad que lydia (0,0,1) pero carga después → gana. */
body { font-family: var(--rossa-font); }

/* Los controles de formulario NO heredan `font-family` del body: el navegador
   les impone su propia fuente de sistema. Sin esto, inputs y selects seguían
   fuera de Work Sans aunque el body ya estuviese bien. `inherit` respeta
   cualquier declaración más específica — los textarea de código de
   comunicaciones llevan `style="font-family:monospace"` inline, que gana. */
#contenido_admin input,
#contenido_admin select,
#contenido_admin textarea,
#contenido_admin button,
#menu input, #menu select, #menu button,
#toolbar input, #toolbar select, #toolbar button,
body.lologin input, body.lologin select, body.lologin textarea, body.lologin button {
  font-family: inherit;
}

/* jQuery-UI: §14 ya normaliza `.ui-widget`, pero el tema smoothness tiene una
   segunda regla para los controles de dentro (datepicker, diálogos). */
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  font-family: var(--rossa-font);
}
/* select2: campo de búsqueda inline del multiselect. */
.select2-container .select2-search--inline .select2-search__field { font-family: inherit; }

/* ── Restos de lydia.css con fuente propia ───────────────────────────────
   Cada selector replica la especificidad del original para ganar por orden
   de carga, sin !important. */
.archivos,                  /* lydia.css:318   Arial */
.archivosfecha,             /* lydia.css:329   Arial */
.cuadro_estancia_lotes,     /* lydia.css:2386  'Arial' */
.cuadro_uso_lotes,          /* lydia.css:2629  'Arial' */
#addcats,                   /* lydia.css:2724  Arial */
#delcats,                   /* lydia.css:2735  Arial */
#btnup,                     /* lydia.css:2746  Arial */
#btndown,                   /* lydia.css:2757  Arial */
#portal a,                  /* lydia.css:1933  Times New Roman */
.secart h2,                 /* lydia.css:2785  Times New Roman */
.facti h2 {                 /* lydia.css:2988  Times New Roman */
  font-family: var(--rossa-font);
}

/* `.pestana_pins span` — pagina_llaves.css:165, Verdana. */
.pestana_pins span { font-family: var(--rossa-font); }

/* Las cinco reglas `.theme_N .titulo, .desc {…Arial}` de lydia (3210, 3254,
   3305, 3355, 3408) tienen una coma de más: ese `.desc` suelto pinta de Arial
   CUALQUIER elemento con clase .desc del PMS (complete_setup, surveys_filters…).
   Lo recuperamos dentro del admin y devolvemos su fuente a las diapositivas. */
#contenido_admin .desc { font-family: var(--rossa-font); }
#contenido_admin [class*="theme_"] .desc { font-family: Arial, Helvetica, sans-serif; }
#contenido_admin .theme_2 .desc { font-family: 'Passion One'; }
/* =============================================================================
   35. DISPONIBILIDAD Y PRECIOS (module=gestor_estancias) — solo CSS.
   La pantalla se identifica por el form #avaibility / la tabla .day_calendar.
   Markup intacto; todo es override sobre clases legacy de lydia.css.
   ========================================================================== */

/* --- Tabla contenedora -------------------------------------------------- */
#contenido_admin .day_calendar {
  width: 100%;
  table-layout: fixed;   /* columnas uniformes y alineadas; la tabla = ancho del contenedor */
  border-collapse: separate;
  border-spacing: 0;
  background: var(--rossa-white);
  font-family: var(--rossa-font);
}

#contenido_admin .day_calendar > thead {
  display: table-header-group !important;
  position: sticky;          /* la cabecera de fechas acompaña al scroll vertical */
  top: 52px;                 /* bajo la barra superior fija (#toplydia, 52px) */
  z-index: 10;
}
#contenido_admin .day_calendar > tbody { display: table-row-group !important; box-shadow: none !important; }
/* sin overflow en el form: así el sticky del thead es relativo a la ventana (un
   ancestro con overflow lo atraparía). */
#contenido_admin #avaibility { max-width: 100%; margin-top: 40px; }
/* el <br> tras los filtros aleja de más el botón de lote; se oculta para que el
   botón quede pegado a los filtros (su margen lo da .admin_boton más abajo). */
#contenido_admin:has(#avaibility) .fechas-calendar > br { display: none; }
#contenido_admin .day_calendar tr td,
#contenido_admin .day_calendar tr th {
  border-radius: 0;
  height: auto;
  padding: 6px 4px;
  vertical-align: middle;
}
/* columna izquierda (etiquetas de fila) */
#contenido_admin .day_calendar .headcol {
  width: 130px !important;
  color: var(--rossa-muted);
  font: 600 12px/1.3 var(--rossa-font);
  text-align: left;
  padding-left: 4px;
  background: var(--rossa-white);
}

/* --- Cabeceras de día (mes / día-semana / número): bloque rosa suave ----- */
/* mes (negro -> rosa, texto muted) */
#contenido_admin .day_calendar .cell_big {
  background-color: #fef0f4;   /* rosa sólido (no rgba) para que el header sticky sea opaco */
  color: var(--rossa-ink);     /* mes en negro */
  font: 700 13px/1.2 var(--rossa-font);   /* ligeramente mayor */
  text-transform: none;
}
/* Al cambiar de mes la cabecera alterna de color */
#contenido_admin .day_calendar .cell_big.ge-mes-impar,
#contenido_admin .day_calendar .weekname.ge-mes-impar,
#contenido_admin .day_calendar .weekday.ge-mes-impar {
  background-color: #e2f1ef;
}
#contenido_admin .day_calendar .cell_big.ge-mes-impar { color: #0b4a47; }
/* Celda de mes colapsada (una por mes, colspan)*/
#contenido_admin .day_calendar .ge-mes {
  padding: 7px 12px;
  text-align: left;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}
/* día de la semana (gris -> rosa) */
#contenido_admin .day_calendar .weekname {
  background-color: #fef0f4;   /* rosa sólido (no rgba) para que el header sticky sea opaco */
  color: var(--rossa-muted);
  font: 600 11px/1.2 var(--rossa-font);
  font-weight: 600 !important;   /* gana a .cell_bold !important */
}
/* número de día */
#contenido_admin .day_calendar .weekday {
  background-color: #fef0f4;   /* rosa sólido (no rgba) para que el header sticky sea opaco */
  color: var(--rossa-ink);
  font: 400 13px/1.2 var(--rossa-font);
  font-weight: 400 !important;
}
/* fin de semana hotelero (viernes y sábado): ámbar suave, distinto del
   rosa/menta de los meses (anula el azul !important de lydia) */
#contenido_admin .day_calendar .weekend {
  background-color: #fdf3dd !important;
  color: #8a6a1d !important;
}
/* hoy: pastilla teal sobre las filas de día y número (gana al finde) */
#contenido_admin .day_calendar .weekname.ge-hoy {
  background-color: var(--rossa-teal) !important;
  color: rgba(255, 255, 255, .8) !important;
  border-radius: 8px 8px 0 0;
}
#contenido_admin .day_calendar .weekday.ge-hoy {
  background-color: var(--rossa-teal) !important;
  color: var(--rossa-white) !important;
  font-weight: 700 !important;
  border-radius: 0 0 8px 8px;
}
/* esquina superior izquierda de las cabeceras: limpia */
#contenido_admin .day_calendar thead .headcol,
#contenido_admin .day_calendar tr:has(> .cell_big) .headcol,
#contenido_admin .day_calendar tr:has(> .weekname) .headcol,
#contenido_admin .day_calendar tr:has(> .weekday) .headcol {
  background: var(--rossa-white);
}

/* --- Barra de tipo de habitación (fila con th.headcol.cell_bold.cell_big) - */
#contenido_admin .day_calendar tr:has(> th.headcol.cell_bold.cell_big) > th,
#contenido_admin .day_calendar tr:has(> th.headcol.cell_bold.cell_big) > td {
  background: #5e8287;
  color: var(--rossa-white);
}
#contenido_admin .day_calendar th.headcol.cell_bold.cell_big {
  font: 700 13px/1.3 var(--rossa-font) !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 9px 10px;
  white-space: nowrap;
}

/* --- Cabeceras de plan (Plan conectado / Restricciones por defecto…) ----- */
#contenido_admin .day_calendar .cabgestest {
  height: auto !important;
  background: transparent;
  color: var(--rossa-teal);
  font: 700 12px/1.3 var(--rossa-font) !important;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 0;
  padding: 8px 2px 4px;
}
/* mini separador bajo los sub-títulos (Est mínima y máxima / Check-in/out) */
#contenido_admin .day_calendar th.cabgestest:not(.head_gerestriction_plan):not(.head_geprice_plan) {
  border-bottom: 2px solid var(--rossa-cyan);
}

/* --- Precios de planes relativos (derivados, solo lectura) --------------- */
/* el PHP traía color:darkblue inline; ahora llevan .ge-price-rel */
#contenido_admin .day_calendar .ge-price-rel {
  color: var(--rossa-ink);
  font: 600 12px/1.4 var(--rossa-font);
  white-space: nowrap;
}

/* --- Disp. real: colores duros -> pastel ---------------------------------- */
#contenido_admin .day_calendar .green-number  { background-color: #d9efc0; color: var(--rossa-ink); }
#contenido_admin .day_calendar .yellow-number { background-color: #fdeebc; color: var(--rossa-ink); }
#contenido_admin .day_calendar .red-number    { background-color: #fbdfe5; color: var(--rossa-ink); }
#contenido_admin .day_calendar td.cont-disponibilidad {
  text-align: center;
  font-size: 12px !important;
}
/* celda Disp. real */
#contenido_admin .day_calendar td.cont-disponibilidad:not(.disp-channel) {
  border-radius: 0;
  padding: 0 12px;            /* banda de ~60px (celda 84 − 24) = ancho del select */
  background-clip: content-box;
}

/* --- Selects de disponibilidad --- */
#contenido_admin .day_calendar select {
  width: auto;
  min-width: 0;
  max-width: 60px;
  border: 1px solid currentColor;
  border-radius: 0 !important;   /* cuadrado: Chrome respeta radius 0 en select */
  background: transparent !important;
  font-family: var(--rossa-font);
  font-size: 11px;
  padding: 2px 2px;              /* compacto, pero deja ver la flecha nativa */
  cursor: pointer;
}
/* el desplegable abierto hereda la fuente del sistema si no se fija en <option> */
#contenido_admin .day_calendar select option { font-family: var(--rossa-font); }
#contenido_admin .day_calendar select.green-number  { color: var(--rossa-green); }
#contenido_admin .day_calendar select.yellow-number { color: #b8860b; }
#contenido_admin .day_calendar select.red-number    { color: var(--rossa-red); }
#contenido_admin .day_calendar select:focus { outline: none; }

/* --- Botones de la cabecera (CARGAR / Ver fechas / acciones en lote) ------ */
#contenido_admin:has(#avaibility) input[type="submit"]:not(.admin_boton) {
  background: var(--rossa-teal);
  color: var(--rossa-white);
  border: 0;
  border-radius: var(--rossa-radius);
  padding: 8px 16px;
  font: 600 13px/1 var(--rossa-font);
  cursor: pointer;
}
#contenido_admin:has(#avaibility) input[type="submit"]:not(.admin_boton):hover {
  background: var(--rossa-petrol-dark);
}

/* --- Cierre canales / web: checkbox + "Abierta" -> icono candado --------- */
/* el checkbox real se oculta (el label sigue alternándolo por for=) */
#contenido_admin .day_calendar input.chcerrada,
#contenido_admin .day_calendar input.cerrada {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
#contenido_admin .day_calendar td:has(.lblcerrada) {
  text-align: center;
}
#contenido_admin .day_calendar .lblcerrada {
  display: inline-block;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  background: transparent;
  padding: 0;
}
/* Iconos del calendario pintados en pseudo-elementos (candado de cierre y
   flechas check-in/out): no hay <i> donde aplicar §32, así que se replica su
   técnica aquí: máscara Lucide rellena con currentColor -> el color lo fija
   cada estado y el tamaño lo fija font-size (caja 1em). */
#contenido_admin .day_calendar .lblcerrada::before,
#contenido_admin .day_calendar td:has(.can-checkin)::before,
#contenido_admin .day_calendar td:has(.can-checkin)::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;    mask-repeat: no-repeat;
  -webkit-mask-position: center;     mask-position: center;
  -webkit-mask-size: contain;        mask-size: contain;
}
#contenido_admin .day_calendar .lblcerrada::before {
  -webkit-mask-image: url("https://cdn.rossa.app/icons/lock-open.svg");
          mask-image: url("https://cdn.rossa.app/icons/lock-open.svg");
  font-size: 15px;
  color: var(--rossa-green);
}
/* el icono refleja el estado REAL que se guardará = checkbox :checked (cerrada). */
#contenido_admin .day_calendar input.cerrada:checked + .lblcerrada::before,
#contenido_admin .day_calendar input.chcerrada:checked + .lblcerrada::before {
  -webkit-mask-image: url("https://cdn.rossa.app/icons/lock.svg");
          mask-image: url("https://cdn.rossa.app/icons/lock.svg");
  color: var(--rossa-red);
}

/* --- Est. mínima y máxima: pastillas rosa suaves (anula inline) ---------- */
#contenido_admin .day_calendar input[name^="minstay-"],
#contenido_admin .day_calendar input[name^="ignore-minstay-"],
#contenido_admin .day_calendar input[name^="maxstay-"],
#contenido_admin .day_calendar input[name^="ignore-maxstay-"] {
  background-color: #f4b6a6 !important;   /* estancia máxima: melocotón */
  color: var(--rossa-ink);
  border: 0;
  border-radius: 6px;
  width: 26px !important;
  height: auto;
  text-align: center;
  font: 600 11px/1.4 var(--rossa-font);
  padding: 3px 0;
  margin: 0 1px;
}
/* estancia mínima: rosa (distinta de la máxima, melocotón) */
#contenido_admin .day_calendar input[name^="minstay-"],
#contenido_admin .day_calendar input[name^="ignore-minstay-"] { background-color: #fcd2e0 !important; }

/* --- Check-in / out: acentos verde (in) / naranja (out) (anula inline) --- */
#contenido_admin .day_calendar input.can-checkin {
  accent-color: var(--rossa-green) !important;
}
#contenido_admin .day_calendar input.can-checkout {
  accent-color: var(--rossa-coral) !important;
}
#contenido_admin .day_calendar td:has(.can-checkin) {
  text-align: center;
}

/* --- Barra de tipo de habitación centrada ------------------------------- */
/* el th ocupa toda la fila y centra; las celdas vacías colapsan a 0 */
#contenido_admin .day_calendar tr:has(> th.headcol.cell_bold.cell_big) > .tdempty {
  width: 0 !important;
  padding: 0 !important;
  border: 0;
}
#contenido_admin .day_calendar th.headcol.cell_bold.cell_big {
  text-align: center;
  width: 100% !important;
}

/* --- Plan de precios: inputs de precio limpios con € ---------------------- */
#contenido_admin .day_calendar input[name^="price-"] {
  width: 100%;
  max-width: 58px;            /* no llena la celda -> separación entre inputs */
  -webkit-appearance: none;   /* quita el spinner nativo (su caja blanca) */
  appearance: none;
  /* Firefox: -moz-appearance es un ALIAS de appearance, así que debe ir
     DESPUÉS de appearance:none o queda machacado y su spinner nativo convive
     con el chevron propio (flechas dobles). Chrome ignora esta línea. */
  -moz-appearance: textfield;
  border: 0;
  border-radius: 0;           /* cuadrado */
  background-color: var(--rossa-surface);
  /* chevron arriba/abajo teal propio (sin fondo), a la derecha */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpath d='M2 6l3-3 3 3M2 10l3 3 3-3' fill='none' stroke='%23005e66' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 3px center;
  background-size: 8px 13px;
  box-sizing: border-box;
  text-align: center;
  font: 700 13px/1.3 var(--rossa-font);
  color: var(--rossa-teal);
  padding: 4px 13px 4px 3px;  /* hueco a la derecha para el chevron */
}
#contenido_admin .day_calendar input[name^="price-"]:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--rossa-teal) inset;
}
/* ocultar del todo el spinner nativo (la caja blanca de las flechas) */
#contenido_admin .day_calendar input[name^="price-"]::-webkit-inner-spin-button,
#contenido_admin .day_calendar input[name^="price-"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  display: none;
}

#contenido_admin .day_calendar .input-symbol-euro::after {
  content: "" !important;
}

/* --- Botón "ver timeline de precios" junto a cada precio -------------------
   Enlace lydia_popup con icono info (máscara Lucide; §32 no mapea
   fa-info-circle). El input cede 17px para que icono y precio convivan en la
   columna de 64px sin desbordar. */
#contenido_admin .day_calendar td:has(> .ge-price-timeline) { white-space: nowrap; }
#contenido_admin .day_calendar td:has(> .ge-price-timeline) .input-symbol-euro {
  display: inline-block;
  width: calc(100% - 17px);
  max-width: 58px;
  vertical-align: middle;
}
/* el input de precio trae width:56px fijo (más abajo): dentro de las celdas
   con botón de timeline debe ceñirse a su hueco o pisa el icono */
#contenido_admin .day_calendar td:has(> .ge-price-timeline) input[name^="price-"],
#contenido_admin .day_calendar td:has(> .ge-price-timeline) input[name^="ignore-price-"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
#contenido_admin .ge-price-timeline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 1px;
  vertical-align: middle;
}
#contenido_admin .ge-price-timeline i {
  display: block;
  width: 13px;
  height: 13px;
  font-size: 0;              /* anula el glifo FA */
}
#contenido_admin .ge-price-timeline i::before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  background-color: var(--rossa-muted);
  -webkit-mask-image: url("https://cdn.rossa.app/icons/info.svg");  mask-image: url("https://cdn.rossa.app/icons/info.svg");
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}
#contenido_admin .ge-price-timeline:hover i::before { background-color: var(--rossa-teal); }

/* --- Fila "Disp. real" entera clicable (abre/cierra el detalle) ----------- */
#contenido_admin .day_calendar tr:has(> .ge-dispo-realhead) { cursor: pointer; }

/* --- Filtros / fechas / acciones en lote: alineados a la izquierda ------- */
#contenido_admin:has(#avaibility) .fechas-calendar {
  text-align: left;
  margin: 14px 0 0;
}
/* El bloque de fechas + lotes vive ahora DENTRO de la barra de filtros
   (mismo panel que plan de tarifas/establecimiento) compartiendo línea. */
#contenido_admin .rossa-gestor-estancias-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  /* el hueco sobrante se reparte también en los extremos (margen a izquierda
     del filtro y a derecha de lotes), no solo entre los grupos */
  justify-content: space-evenly;
}
/* el form del filtro venía a ancho completo y empujaba las fechas a otra fila */
#contenido_admin .rossa-gestor-estancias-filter-bar .rossa-establecimiento-filter-form {
  width: auto;
  flex: 0 1 auto;
}
/* el :has(#avaibility) de las reglas antiguas cuenta como ID en especificidad:
   se replica aquí para ganarles (ponían el bloque en columna) */
#contenido_admin:has(#avaibility) .rossa-gestor-estancias-filter-bar .fechas-calendar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  flex: 0 1 auto;   /* no absorbe el hueco: se queda a nivel de barra para space-evenly */
}
/* separador solo entre "Reiniciar filtros" y el botón de lotes (quedan
   adyacentes); filtro↔fechas ya los separa el propio margen de space-evenly.
   Solo si el enlace de lotes existe. */
#contenido_admin:has(#avaibility) .rossa-gestor-estancias-filter-bar .fechas-calendar:has(> a.lydia_popup)::after {
  content: "";
  order: 5;
  width: 1px;
  height: 28px;
  background: var(--rossa-border);
  margin: 0 4px;
}
#contenido_admin:has(#avaibility) .rossa-gestor-estancias-filter-bar .fechas-calendar > a.admin_boton { order: 10; }
#contenido_admin:has(#avaibility) .rossa-gestor-estancias-filter-bar .fechas-calendar > a.rossa-ge-reset-filters { order: 1; }
#contenido_admin:has(#avaibility) .rossa-gestor-estancias-filter-bar .fechas-calendar .admin_boton { margin-top: 0; }
@media (max-width: 900px) {
  #contenido_admin:has(#avaibility) .rossa-gestor-estancias-filter-bar .fechas-calendar { flex-wrap: wrap; }
  /* al partirse en filas el separador queda flotando suelto: fuera */
  #contenido_admin:has(#avaibility) .rossa-gestor-estancias-filter-bar .fechas-calendar:has(> a.lydia_popup)::after { content: none; }
}
/* Móvil: la barra en fila deja los rótulos separados de su campo (el "Hasta:"
   colgando de la línea anterior). Se apila en bloques a ancho completo:
   cada etiqueta con su campo, y los botones a lo ancho. */
@media (max-width: 700px) {
  #contenido_admin .rossa-gestor-estancias-filter-bar {
    flex-direction: column;
    align-items: stretch;
    /* aire entre los tres grupos (filtro · fechas · lotes) para que se lean
       como bloques separados y no como una lista corrida de campos */
    gap: 22px;
  }
  #contenido_admin .rossa-gestor-estancias-filter-bar .rossa-establecimiento-filter-form { width: 100%; }
  /* los dos combos a ancho completo (select2 pinta un span con width inline) */
  #contenido_admin .rossa-gestor-estancias-filter-bar .rossa-establecimiento-filter-fee select,
  #contenido_admin .rossa-gestor-estancias-filter-bar .select2-container { width: 100% !important; }
  #contenido_admin .rossa-gestor-estancias-filter-bar .rossa-establecimiento-filter-fee,
  #contenido_admin .rossa-gestor-estancias-filter-bar .rossa-establecimiento-filter-field { width: 100%; }
  #contenido_admin:has(#avaibility) .rossa-gestor-estancias-filter-bar .fechas-calendar {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px 10px;
    width: 100%;
  }
  /* el form de fechas ocupa la rejilla entera y reparte sus propios hijos */
  #contenido_admin:has(#avaibility) .rossa-gestor-estancias-filter-bar #fechas {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px 10px;
  }
  #contenido_admin:has(#avaibility) .fechas-calendar input[type="date"] {
    width: 100% !important;
    margin-right: 0;
    box-sizing: border-box;
  }
  /* botones (Ver fechas / lotes) a ancho completo, uno por línea */
  #contenido_admin:has(#avaibility) .rossa-gestor-estancias-filter-bar .admin_boton,
  #contenido_admin:has(#avaibility) .rossa-gestor-estancias-filter-bar a.admin_boton {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin: 0;
  }
  /* lotes es un grupo aparte dentro de .fechas-calendar: se despega del bloque
     de fechas para no leerse como su tercer botón */
  #contenido_admin:has(#avaibility) .rossa-gestor-estancias-filter-bar .fechas-calendar > a.admin_boton { margin-top: 10px; }
}
#contenido_admin:has(#avaibility) .fechas-calendar label {
  font: 600 13px/1 var(--rossa-font);
  color: var(--rossa-ink);
  margin-right: 4px;
}
#contenido_admin:has(#avaibility) .fechas-calendar input[type="date"] {
  margin-right: 10px;
}
#contenido_admin:has(#avaibility) .fechas-calendar .admin_boton {
  margin-top: 6px;
  display: inline-block;
}

/* --- Detalle fino (Figma): etiquetas, findes uniformes, separadores, flechas - */
/* findes: uniformar con rosa quedó descartado
#contenido_admin .day_calendar .weekend {
  background-color: #fef0f4 !important;
} */
/* etiquetas de fila (columna izquierda) en cyan */
#contenido_admin .day_calendar th.headcol {
  color: var(--rossa-cyan);
  font: 400 12px/1.3 var(--rossa-font);
}
/* separadores finos entre filas de datos (excluye cabeceras de día, barra de
   habitación y chips de plan) */
#contenido_admin .day_calendar tr:not(:has(.cell_big)):not(:has(.weekname)):not(:has(.weekday)):not(:has(.cabgestest)):not(:has(.head_gerestriction_plan)):not(:has(.head_geprice_plan)) > th,
#contenido_admin .day_calendar tr:not(:has(.cell_big)):not(:has(.weekname)):not(:has(.weekday)):not(:has(.cabgestest)):not(:has(.head_gerestriction_plan)):not(:has(.head_geprice_plan)) > td {
  border-bottom: 1px solid rgba(22, 41, 45, .07);
}
/* check-in / out: flechas entrada (verde) y salida (naranja) junto a las casillas */
#contenido_admin .day_calendar td:has(.can-checkin) { white-space: nowrap; }
#contenido_admin .day_calendar td:has(.can-checkin)::before {
  -webkit-mask-image: url("https://cdn.rossa.app/icons/log-in.svg");
          mask-image: url("https://cdn.rossa.app/icons/log-in.svg");
  color: var(--rossa-green);
  font-size: 11px;
  margin-right: 3px;
  vertical-align: middle;
}
#contenido_admin .day_calendar td:has(.can-checkin)::after {
  -webkit-mask-image: url("https://cdn.rossa.app/icons/log-out.svg");
          mask-image: url("https://cdn.rossa.app/icons/log-out.svg");
  color: var(--rossa-coral);
  font-size: 11px;
  margin-left: 3px;
  vertical-align: middle;
}

/* --- Cada tipo de habitación como "tarjeta": hueco arriba + barra redondeada - */
/* hueco gris entre bloques (lee como tarjetas sobre fondo claro) */
#contenido_admin .day_calendar tr:has(> th.headcol.cell_bold.cell_big) > th,
#contenido_admin .day_calendar tr:has(> th.headcol.cell_bold.cell_big) > td {
  border-top: 18px solid var(--rossa-surface);
}
/* esquinas superiores redondeadas de la barra teal */
#contenido_admin .day_calendar th.headcol.cell_bold.cell_big {
  border-radius: var(--rossa-radius) var(--rossa-radius) 0 0;
}


/* =============================================================================
   35b. DISPONIBILIDAD Y PRECIOS — refinamiento fino (cargado al final, gana).
   ========================================================================== */

/* ---- Filtros Desde/Hasta (#fechas): misma altura (38px), radio y layout. El
   filtro "Plan de tarifas" lo estiliza v5.5 (.rossa-establecimiento-filter-*);
   no lo tocamos para no pisar su diseño. --- */
#contenido_admin:has(#avaibility) #fechas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
#contenido_admin:has(#avaibility) .fechas-calendar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 0 0;
}
#contenido_admin:has(#avaibility) #fechas label {
  margin: 0;
  font: 600 13px/1 var(--rossa-font);
  color: var(--rossa-ink);
}
/* inputs de fecha: caja blanca 38px, radio 8px */
#contenido_admin:has(#avaibility) #fechas input[type="date"] {
  height: 38px;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  background: var(--rossa-white);
  color: var(--rossa-ink);
  font: 500 13px/1 var(--rossa-font);
  padding: 0 12px;
  cursor: pointer;
}
#contenido_admin:has(#avaibility) #fechas input[type="date"] { width: 140px; }
#contenido_admin:has(#avaibility) #fechas input[type="date"]:focus {
  outline: none;
  border-color: var(--rossa-teal);
}
/* botón Ver fechas: teal 38px */
#contenido_admin:has(#avaibility) #fechas input[type="submit"] {
  height: 38px;
  box-sizing: border-box;
  margin: 0;
  background: var(--rossa-teal);
  color: var(--rossa-white);
  border: 0;
  border-radius: var(--rossa-radius);
  padding: 0 18px;
  font: 600 13px/1 var(--rossa-font);
  cursor: pointer;
}
#contenido_admin:has(#avaibility) #fechas input[type="submit"]:hover {
  background: var(--rossa-petrol-dark);
}
/* Realizar acciones en lote */
#contenido_admin:has(#avaibility) .fechas-calendar a.admin_boton {
  height: 38px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0 18px;
  border-radius: var(--rossa-radius);
  background: var(--rossa-white) !important;
  border: 1px solid var(--rossa-border) !important;
  color: var(--rossa-ink) !important;
  font: 600 13px/1 var(--rossa-font);
  text-decoration: none;
}
#contenido_admin:has(#avaibility) .fechas-calendar a.admin_boton:hover {
  background: var(--rossa-surface) !important;
}

/* ---- Botonera unificada ---- */
#contenido_admin:has(#avaibility) input[type="submit"].rossa-establecimiento-filter-submit {
  height: 38px;
  box-sizing: border-box;
  padding: 0 18px;
  border-radius: var(--rossa-radius);
  font: 600 13px/1 var(--rossa-font);
}
#contenido_admin:has(#avaibility) .rossa-form-actions .admin_boton {
  height: 38px;
  box-sizing: border-box;
  padding: 0 22px;
  font: 600 13px/1 var(--rossa-font);
}

/* ---- Quitar la franja gris sobre la barra de habitación (hueco blanco) ---- */
#contenido_admin .day_calendar tr:has(> th.headcol.cell_bold.cell_big) > th,
#contenido_admin .day_calendar tr:has(> th.headcol.cell_bold.cell_big) > td {
  border-top: 22px solid var(--rossa-white);
}

/* ---- Separadores tipo tabla: líneas claras entre filas de datos ---------- */
#contenido_admin .day_calendar tr:not(:has(.cell_big)):not(:has(.weekname)):not(:has(.weekday)):not(:has(.cabgestest)):not(:has(.head_gerestriction_plan)):not(:has(.head_geprice_plan)) > th,
#contenido_admin .day_calendar tr:not(:has(.cell_big)):not(:has(.weekname)):not(:has(.weekday)):not(:has(.cabgestest)):not(:has(.head_gerestriction_plan)):not(:has(.head_geprice_plan)) > td {
  border-bottom: 1px solid var(--rossa-border);
}
/* el último registro de cada bloque (la fila seguida de una barra de plan o de
   tipo de habitación) no lleva separador inferior. */
#contenido_admin .day_calendar tr:has(+ tr > .head_gerestriction_plan) > th,
#contenido_admin .day_calendar tr:has(+ tr > .head_gerestriction_plan) > td,
#contenido_admin .day_calendar tr:has(+ tr > .head_geprice_plan) > th,
#contenido_admin .day_calendar tr:has(+ tr > .head_geprice_plan) > td,
#contenido_admin .day_calendar tr:has(+ tr > .cell_big) > th,
#contenido_admin .day_calendar tr:has(+ tr > .cell_big) > td {
  border-bottom: none !important;
}

/* ---- Separación clara de secciones: barras de plan a todo el ancho -------- */
/* hueco claro antes + barra teal-tint en TODA la fila de la cabecera de plan */
#contenido_admin .day_calendar tr:has(> th.head_gerestriction_plan) > th,
#contenido_admin .day_calendar tr:has(> th.head_gerestriction_plan) > td,
#contenido_admin .day_calendar tr:has(> th.head_geprice_plan) > th,
#contenido_admin .day_calendar tr:has(> th.head_geprice_plan) > td {
  border-top: 20px solid var(--rossa-white);     /* hueco igual al de los sub-títulos */
  background: var(--rossa-surface) !important;   /* divisor de sección gris neutro */
}
#contenido_admin .day_calendar th.head_gerestriction_plan,
#contenido_admin .day_calendar th.head_geprice_plan {
  color: var(--rossa-ink) !important;
  font: 700 11px/1.3 var(--rossa-font) !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;
  padding: 8px 12px;
  white-space: nowrap;
  overflow: visible;
}

/* ---- Radios de pastillas/celdas: las celdas sin redondeo para que el borde
   inferior (separador) sea una línea recta continua, no segmentos redondeados. */
#contenido_admin .day_calendar td.cont-disponibilidad { border-radius: 0; }
#contenido_admin .day_calendar input[name^="minstay-"],
#contenido_admin .day_calendar input[name^="ignore-minstay-"],
#contenido_admin .day_calendar input[name^="maxstay-"],
#contenido_admin .day_calendar input[name^="ignore-maxstay-"] { border-radius: 6px !important; }
#contenido_admin .day_calendar select { border-radius: 6px; }

/* =============================================================================
   35c. SIN SCROLL HORIZONTAL DE PÁGINA (prioritario).
   El legacy cabía; mis celdas anchas lo desbordaban. Contengo el overflow en
   el propio form y compacto las celdas para que quepan como antes.
   ========================================================================== */
#contenido_admin #avaibility { display: block; max-width: 100%; margin-top: 22px; }
#contenido_admin .day_calendar { border-spacing: 0 !important; }
#contenido_admin .day_calendar tr td,
#contenido_admin .day_calendar tr th { padding: 8px 2px; }
#contenido_admin .day_calendar .headcol { width: 92px !important; }
/* table-layout:fixed reparte el resto en columnas uniformes -> los inputs llenan
   su columna y se leen bien sin ensanchar la tabla (la tabla = ancho contenedor) */
#contenido_admin .day_calendar select {
  width: 100%;
  min-width: 0;
  padding: 2px 2px;
  font-size: 11px;
}
#contenido_admin .day_calendar input[name^="price-"],
#contenido_admin .day_calendar input[name^="ignore-price-"] {
  box-sizing: border-box;
  width: 56px;                /* total < celda -> centrado deja separación */
  max-width: 56px;
  padding: 4px 13px 4px 3px;
  font-size: 13px;
}
#contenido_admin .day_calendar input[name^="minstay-"],
#contenido_admin .day_calendar input[name^="ignore-minstay-"],
#contenido_admin .day_calendar input[name^="maxstay-"],
#contenido_admin .day_calendar input[name^="ignore-maxstay-"] {
  width: 21px !important;
  padding: 2px 0;
  margin: 0 1px;
  font-size: 11px;
}
/* barra de habitación: título en UNA línea, se extiende sobre la barra teal */
#contenido_admin .day_calendar th.headcol.cell_bold.cell_big {
  width: 92px !important;
  white-space: nowrap !important;
  overflow: visible;
  text-align: left;
}
/* check-in/out: flechas ENCIMA de las casillas (como el Figma), no a los lados */
#contenido_admin .day_calendar td:has(.can-checkin) {
  position: relative;
  padding: 17px 2px 4px;
  text-align: center;
  white-space: nowrap;
}
#contenido_admin .day_calendar td:has(.can-checkin)::before,
#contenido_admin .day_calendar td:has(.can-checkin)::after {
  position: absolute;
  top: 3px;
  font-size: 12px;
  margin: 0;
}
#contenido_admin .day_calendar td:has(.can-checkin)::before {
  left: 50%;
  margin-left: -16px;
  color: var(--rossa-green);
}
#contenido_admin .day_calendar td:has(.can-checkin)::after {
  left: 50%;
  margin-left: 5px;
  color: var(--rossa-coral);
}
/* casillas check-in/out contorneadas (no rellenas): sin marcar = contorno
   oscuro vacío; marcada = borde + check del color (verde entrada / coral salida). */
#contenido_admin .day_calendar input.can-checkin,
#contenido_admin .day_calendar input.can-checkout {
  -webkit-appearance: none;
  appearance: none;
  width: 13px !important;
  height: 13px !important;
  margin: 0 2px !important;
  border: 1.5px solid var(--rossa-ink);
  border-radius: 3px;
  background: var(--rossa-white);
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}
#contenido_admin .day_calendar input.can-checkin:checked  { border-color: var(--rossa-green); }
#contenido_admin .day_calendar input.can-checkout:checked { border-color: var(--rossa-coral); }
#contenido_admin .day_calendar input.can-checkin:checked::after,
#contenido_admin .day_calendar input.can-checkout:checked::after {
  content: "";
  position: absolute;
  left: 3.5px; top: 0.5px;
  width: 3px; height: 6px;
  border-style: solid;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
#contenido_admin .day_calendar input.can-checkin:checked::after  { border-color: var(--rossa-green); }
#contenido_admin .day_calendar input.can-checkout:checked::after { border-color: var(--rossa-coral); }

/* --- Plan compacto (campos disabled): todo el estado en gris -------------- */
/* candado (abierto o cerrado) gris */
#contenido_admin .day_calendar input.cerrada:disabled + .lblcerrada::before,
#contenido_admin .day_calendar input.chcerrada:disabled + .lblcerrada::before {
  color: var(--rossa-muted);
}
#contenido_admin .day_calendar input.cerrada:disabled + .lblcerrada,
#contenido_admin .day_calendar input.chcerrada:disabled + .lblcerrada { cursor: default; }
/* flechas y casillas de check-in/out grises */
#contenido_admin .day_calendar td:has(.can-checkin:disabled)::before,
#contenido_admin .day_calendar td:has(.can-checkin:disabled)::after {
  color: var(--rossa-muted);
}
#contenido_admin .day_calendar input.can-checkin:disabled,
#contenido_admin .day_calendar input.can-checkout:disabled {
  border-color: var(--rossa-muted);
  cursor: default;
}
#contenido_admin .day_calendar input.can-checkin:disabled:checked::after,
#contenido_admin .day_calendar input.can-checkout:disabled:checked::after {
  border-color: var(--rossa-muted);
}
/* pastillas de est. mínima/máxima grises (anulan el rosa/melocotón) */
#contenido_admin .day_calendar input[name^="minstay-"]:disabled,
#contenido_admin .day_calendar input[name^="ignore-minstay-"]:disabled,
#contenido_admin .day_calendar input[name^="maxstay-"]:disabled,
#contenido_admin .day_calendar input[name^="ignore-maxstay-"]:disabled {
  background-color: var(--rossa-surface) !important;
  color: var(--rossa-muted);
}
/* aviso "?" junto al nombre del plan compacto (title -> tippy) */
#contenido_admin .day_calendar th.head_gerestriction_plan i.ge-compact-lock {
  font-size: 14px;
  color: var(--rossa-muted);
  vertical-align: -2px;
  cursor: help;
}

/* Campo inválido al guardar */
#contenido_admin .incorrect_field,
#contenido_admin .day_calendar input.incorrect_field {
  background-color: var(--rossa-red) !important;
  color: var(--rossa-white) !important;
  border: 1px solid var(--rossa-red) !important;
  font-size: inherit !important;
  font-weight: 600 !important;
}
#contenido_admin .incorrect_field:focus {
  outline: 2px solid var(--rossa-red);
  outline-offset: 1px;
}
/* Flechitas del spinner (inputs number de precio) en blanco sobre el rojo:
   no hay propiedad de color para el pseudo-elemento, se invierte el gris. */
#contenido_admin input.incorrect_field::-webkit-inner-spin-button,
#contenido_admin input.incorrect_field::-webkit-outer-spin-button {
  filter: invert(1) brightness(2);
}

/* =============================================================================
   36. DISPONIBILIDAD Y PRECIOS — layout de tarjetas (rework de estructura)
   El printer emite por habitación: .ge-room-bar + 3× .ge-card
   (.ge-card-title + table.day_calendar). Todo plano sobre blanco: el nombre del
   alojamiento es un título teal (no una barra rellena) y no hay caja de fondo.
   ========================================================================== */
#contenido_admin #avaibility {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
/* bloque por habitación: sin caja: cuelga del blanco de la página.
   Sin overflow:hidden (rompería el sticky del thead). */
#contenido_admin .ge-room {
  margin: 0 0 60px;
  background: transparent;
  border-radius: 0;
}
#contenido_admin .ge-room:last-child { margin-bottom: 0; }
/* nombre del alojamiento: titular de sección, no una barra de color */
#contenido_admin .ge-room-bar {
  margin: 0 0 6px;
  padding: 0 2px;
  background: transparent;
  color: var(--rossa-teal);
  text-align: left;
  font: 700 19px/1.3 var(--rossa-font);
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: 0;
}
/* secciones: planas dentro del contenedor blanco (sin caja ni radio propios) */
#contenido_admin .ge-card {
  margin: 0;
  padding: 16px 16px 14px;
  background: transparent;
  border-radius: 0;
}
/* título de sección dentro de la tarjeta */
#contenido_admin .ge-card-title {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: var(--rossa-tint);
  border-left: 3px solid var(--rossa-teal);
  border-radius: 0 var(--rossa-radius) var(--rossa-radius) 0;
  font: 700 13px/1.3 var(--rossa-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rossa-teal);
}
#contenido_admin .ge-card:not(:first-child) .ge-card-title { margin-top: 34px; }
#contenido_admin .ge-card .day_calendar { margin: 0; }
/* el calendario cabe sin scroll horizontal de página*/
#contenido_admin:has(#avaibility) { min-width: 0; }
#contenido_admin .day_calendar td { width: auto !important; }

/* Cabecera de fechas sticky */
#contenido_admin .ge-global-header {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 10px 16px 0;
  background: var(--rossa-white);
  box-sizing: border-box;
}
#contenido_admin .ge-global-header .day_calendar { width: 100%; }
/* Scrollbar horizontal DEL CONTENEDOR (el form), no de la página */
#contenido_admin #avaibility::-webkit-scrollbar { height: 10px; width: 10px; }
#contenido_admin #avaibility::-webkit-scrollbar-track { background: var(--rossa-white); }
#contenido_admin #avaibility::-webkit-scrollbar-thumb { background: var(--rossa-teal); border-radius: 999px; }
#contenido_admin #avaibility::-webkit-scrollbar-thumb:hover { background: #00474d; }
/* Primer alojamiento: su barra y la cabecera de fechas viven FUERA de la
   tarjeta */
#contenido_admin .ge-room--headless {
  margin-top: 0;
  border-radius: 0 0 var(--rossa-radius) var(--rossa-radius);
}

/* Rangos largos (2+ meses). */
#contenido_admin #avaibility {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  position: relative;
}
#contenido_admin #avaibility > .ge-room-bar,
#contenido_admin #avaibility > .ge-global-header,
#contenido_admin #avaibility > .ge-room {
  min-width: var(--ge-tablewidth, 0px);
}
#contenido_admin .ge-card .day_calendar { width: 100%; }

/* ----- Móvil: calendario usable. */
@media (max-width: 700px) {
  /* El scroll horizontal vive en el CONTENEDOR también en móvil */
  #contenido_admin .ge-room-scroll { overflow: visible; }
  #contenido_admin .ge-card { overflow: visible; }
  /* columnas uniformes (table-layout:fixed + ancho = 104 + nºdías×64 vía var del
     printer); mismo nº de días -> las 3 secciones quedan ALINEADAS. */
  #contenido_admin .ge-card .day_calendar,
  #contenido_admin .ge-global-header .day_calendar {
    table-layout: fixed !important;
    width: var(--ge-tablewidth, 1320px) !important;
    min-width: var(--ge-tablewidth, 1320px) !important;
  }
  #contenido_admin .day_calendar td,
  #contenido_admin .day_calendar th {
    width: 64px !important;
    box-sizing: border-box;
    white-space: nowrap;
  }

  #contenido_admin .day_calendar td.ge-mes { width: auto !important; }
  /* etiquetas: ancho fijo (igual en todas las secciones) */
  #contenido_admin .day_calendar .headcol {
    width: 104px !important;
    box-sizing: border-box;
    white-space: normal;
  }
  /* la barra superior en móvil mide 48px -> la cabecera de fechas sticky se pega
     justo debajo (en escritorio son 52px). */
  #contenido_admin .day_calendar > thead { top: 48px; }
  /* la cabecera va sticky respecto al contenedor (#avaibility), cuyo borde ya
     está bajo la barra superior: top:0 igual que en escritorio */
  #contenido_admin .ge-global-header { top: 0; }
  /* en móvil el hueco libre es menor (barra superior de 48px) */
  #contenido_admin #avaibility { --ge-viewport-offset: 190px; }
}
/* el último registro de cada tarjeta (última fila del tbody) no lleva separador
   inferior: la propia tarjeta ya cierra el bloque. */
#contenido_admin .day_calendar > tbody > tr:last-child > th,
#contenido_admin .day_calendar > tbody > tr:last-child > td { border-bottom: none !important; }
/* cabecera de fechas compacta: mes / día-semana / número pegados en vertical
   (sin tocar el aire de las filas de datos). */
#contenido_admin .day_calendar > thead tr > th,
#contenido_admin .day_calendar > thead tr > td {
  padding-top: 1px;
  padding-bottom: 1px;
  line-height: 1.1;
}
/* sin separador ENCIMA de los sub-títulos */
#contenido_admin .day_calendar tr:has(+ tr > .cabgestest:not(.head_gerestriction_plan):not(.head_geprice_plan)) > th,
#contenido_admin .day_calendar tr:has(+ tr > .cabgestest:not(.head_gerestriction_plan):not(.head_geprice_plan)) > td {
  border-bottom: none !important;
}
/* un poco más de aire JUSTO ENCIMA de los sub-títulos (separa el grupo anterior). */
#contenido_admin .day_calendar tr:has(> .cabgestest:not(.head_gerestriction_plan):not(.head_geprice_plan)) > th,
#contenido_admin .day_calendar tr:has(> .cabgestest:not(.head_gerestriction_plan):not(.head_geprice_plan)) > td {
  padding-top: 20px;
}

/* --- Desplegable de ocupación (flecha junto a "Disp. real") ----------------
   La tarjeta Disponibilidad muestra por defecto SOLO la fila "Disp. real"; las
   filas de detalle (Res. Rossa / Res. canales / Est. cerradas, tr.ge-dispo-extra)
   se pliegan tras la flecha del rótulo. Sin JS: el <label> lleva un checkbox
   oculto y :has() lo lee a nivel de SU tabla, así cada habitación pliega y
   despliega la suya. */
#contenido_admin .day_calendar tr.ge-dispo-extra { display: none; }
#contenido_admin .day_calendar.ge-dispo-open tr.ge-dispo-extra { display: table-row; }

/* el label ocupa la celda entera: flecha + rótulo, todo clicable */
#contenido_admin .ge-dispo-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 2px;
  border-radius: 4px;
  cursor: pointer;
}
#contenido_admin .ge-dispo-toggle:hover { background: var(--rossa-tint); }
#contenido_admin .ge-dispo-toggle-txt { pointer-events: auto; }
#contenido_admin .ge-dispo-toggle:has(input:focus-visible) {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 94, 102, .25);
}
#contenido_admin .ge-dispo-toggle-chk {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
#contenido_admin .ge-dispo-toggle-arrow {
  width: 14px;
  height: 14px;
  background-color: var(--rossa-teal);
  -webkit-mask-image: url("https://cdn.rossa.app/icons/chevron-right.svg");  mask-image: url("https://cdn.rossa.app/icons/chevron-right.svg");
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
  transition: transform .15s ease;
}
#contenido_admin .day_calendar.ge-dispo-open .ge-dispo-toggle-arrow { transform: rotate(90deg); }
/* aire entre la cabecera de fechas y la fila "Disp. real": ambas llevan color
   de fondo y pegadas se leían como un solo bloque. El hueco se hace con borde
   transparente + background-clip para que el verde no lo rellene. */
#contenido_admin .day_calendar tr:has(> .ge-dispo-realhead) > th,
#contenido_admin .day_calendar tr:has(> .ge-dispo-realhead) > td {
  border-top: 8px solid transparent;
  background-clip: padding-box;
}

/* --- Paginación de estancias (ge-pagination) --------------------------------
   Antes: caja gris #f5f5f5 con botones bootstrap inline (azul #007bff / gris
   #6c757d). Pasa al lenguaje del rediseño: fondo blanco, info en muted y
   botones secundarios de contorno; el deshabilitado se apaga, no cambia de
   color. Las clases las emite printPagination() (estilos inline retirados). */
#contenido_admin .ge-pagination {
  margin-top: 20px;
  padding: 14px 0 4px;
  text-align: center;
}
#contenido_admin .ge-pag-info {
  margin-bottom: 10px;
  font: 600 13px/1.4 var(--rossa-font);
  color: var(--rossa-muted);
}
#contenido_admin .ge-pag-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
#contenido_admin .ge-pag-btn {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  box-sizing: border-box;
  background: var(--rossa-white);
  border: 1px solid var(--rossa-border);
  border-radius: var(--rossa-radius);
  color: var(--rossa-ink);
  font: 600 12.5px/1 var(--rossa-font);
  text-decoration: none;
}
#contenido_admin a.ge-pag-btn:hover {
  background: var(--rossa-surface);
  color: var(--rossa-ink);
}
#contenido_admin .ge-pag-btn--mini { padding: 0 10px; font-size: 11.5px; }
#contenido_admin .ge-pag-btn--off { opacity: .45; cursor: default; }
#contenido_admin .ge-pag-current {
  padding: 0 8px;
  font: 700 13px/1 var(--rossa-font);
  color: var(--rossa-teal);
}

/* --- Aviso de acción (showNotice) ----------------------------------------
   Venía de ver_reserva.css como caja blanca cuadrada con sombra y una barra
   de color a la izquierda. Se alinea con el resto de mensajes (§17): caja
   plana teñida según el estado, 8px de radio, sin sombra ni barra. */
#contenido_admin .rossa-notice {
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  padding: 12px 16px;
  margin: 10px 0;
  font-family: var(--rossa-font);
  font-size: 14px;
  font-weight: 700;
  background: #eff2f3;
  color: var(--rossa-ink);
}
#contenido_admin .rossa-notice::before { content: none; }   /* barra lateral fuera */
#contenido_admin .rossa-notice--success { background: #ebf7f3; color: var(--rossa-green-fig); }
#contenido_admin .rossa-notice--warning { background: #fdf3ec; color: var(--rossa-coral); }
/* la X de cerrar hereda el color del mensaje en vez del gris suelto */
#contenido_admin .rossa-notice .rossa-close { color: inherit; opacity: .55; font-size: 16px; }
#contenido_admin .rossa-notice .rossa-close:hover { opacity: 1; }

#contenido_admin .rossa-notice .rossa-notice__icon {
  flex: 0 0 auto;
  width: 40px;      /* como el PNG que sustituye (iba a 50px con su propio margen) */
  height: 40px;
  margin-right: 8px;
  font-size: 40px;
  line-height: 1;
  color: inherit;   /* verde en success, coral en warning (lo pone .rossa-notice--*) */
}

/* --- Barra de scroll horizontal gemela (§36) -----------------------------
   El calendario scrollea dentro de #avaibility y su barra queda al final del
   contenido; esta gemela va pegada sobre la botonera fija para poder moverse
   en horizontal sin bajar del todo. El JS de gestor_estancias.php la crea,
   sincroniza su scrollLeft y la oculta cuando la barra real entra en pantalla. */
#contenido_admin .ge-hscroll {
  position: sticky;
  bottom: 67px;              /* pegada al borde superior de la botonera fija (67px de alto) */
  z-index: 25;
  height: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}
#contenido_admin .ge-hscroll > div { height: 1px; }
#contenido_admin .ge-hscroll.is-hidden { display: none; }
#contenido_admin .ge-hscroll::-webkit-scrollbar { height: 10px; }
#contenido_admin .ge-hscroll::-webkit-scrollbar-track { background: var(--rossa-white); border-radius: 999px; }
#contenido_admin .ge-hscroll::-webkit-scrollbar-thumb { background: var(--rossa-teal); border-radius: 999px; }
#contenido_admin .ge-hscroll::-webkit-scrollbar-thumb:hover { background: #00474d; }

/* cabecera de fechas en modo "fijada" (la conmuta el JS de gestor_estancias.php
   cuando el sticky no puede funcionar por vivir en un contenedor con scroll) */
#contenido_admin .ge-global-header.is-fixed {
  position: fixed;
  z-index: 30;
  overflow: hidden;         /* recorta la tabla desplazada con translateX */
  box-sizing: border-box;
  background: var(--rossa-white);
  /* al fijarse deja de heredar el ancho total de la tabla (min-width del
     contenedor): toma el ancho visible que le pone el JS */
  min-width: 0 !important;
}
/* ...pero su tabla debe conservar el ancho real del calendario (si se ciñe al
   ancho visible, las columnas se comprimen y dejan de cuadrar con los datos).
   El ancho exacto lo pone el JS copiándolo de la tabla de datos: usar
   --ge-tablewidth aquí desviaba las columnas (esa medida no descuenta los
   16px de padding de las tarjetas). */
#contenido_admin .ge-global-header.is-fixed .day_calendar {
  min-width: 0;
}

/*=============================================================================
  62. ADD_RESERVA — CABECERA FIJA DE RESULTADOS  (table.reservas_boards thead)
  ---------------------------------------------------------------------------
  add_reserva_funcs.js marca el thead con .theadfixed al bajar por la lista de
  habitaciones, y lydia.css lo ancla con top:30px: la medida de la barra
  superior antigua. La barra del rediseño mide 72px (48px por debajo de 700px),
  así que la cabecera quedaba metida detrás de ella —la banda de fechas no se
  veía y la fila de columnas salía cortada—. Se reancla al alto real de la
  barra y se apila por encima de las filas que pasan por debajo, que se
  transparentaban sobre el texto de las columnas.
=============================================================================*/
#contenido_admin .reservas_boards thead.theadfixed {
  top: 72px;                          /* alto de #toolbar */
  z-index: 150;                       /* por debajo de #menu (200) y #toplydia (250) */
  background-color: var(--rossa-white);
  /* add_reserva_funcs.js fija el ancho que mide jQuery —el del contenido, sin el
     border-spacing de la tabla—, así que la banda quedaba 16px corta por lado y
     dejaba ver dos huecos. La caja es content-box: el relleno la estira hasta el
     ancho real de la tabla y el margen negativo la recoloca sobre ella. */
  padding-left: 16px;
  padding-right: 16px;
  margin-left: -16px;
}
/* Las filas del thead son transparentes: sin fondo propio, el contenido que
   scrollea por debajo asoma entre las celdas. */
#contenido_admin .reservas_boards thead.theadfixed tr.cab,
#contenido_admin .reservas_boards thead.theadfixed tr.cab > td {
  background-color: var(--rossa-white);
}
/* Sin los filetes petróleo de cabecera de tabla: flotando sobre el contenido
   marcaban dos rayas que no existen en el resto del panel (la separación ya la
   da la sombra de lydia.css). El !important iguala al de la regla base de
   `tr.cab td`. */
#contenido_admin .reservas_boards thead.theadfixed tr.cab > td {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

@media (max-width: 700px) {
  /* §21 baja la barra a 48px */
  #contenido_admin .reservas_boards thead.theadfixed { top: 48px; }
}

/*=============================================================================
  63. EDITOR DE CÓDIGOS DE DESCUENTO  (module=add_codigo)
=============================================================================*/
/* lydia flota el botón de guardar a la derecha; aquí va centrado bajo las
   tablas del formulario */
#contenido_admin form#codes #guardamodof {
  float: none;
  display: block;
  margin: 0 auto;
}
/*------------------------------------------------- 61. AEAT NIF (módulo facturación)
   Pestaña module_config #aeatIdentificacion. Flat white, tokens only. */
#contenido_admin #aeatIdentificacion .rossa-aeat-ident {
  max-width: 760px;
  font-family: var(--rossa-font);
  color: var(--rossa-ink);
}
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: var(--rossa-navy);
}
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__lead,
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__hint {
  margin: 0 0 16px;
  color: var(--rossa-muted);
  font-size: 13px;
  line-height: 1.5;
}
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__card {
  margin: 0 0 20px;
  padding: 18px 0 4px;
  border: 0;
  border-top: 1px solid var(--rossa-border);
  background: var(--rossa-white);
  box-shadow: none;
}
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__card h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--rossa-teal);
}
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__status {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.7;
}
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__on { color: var(--rossa-green); }
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__off { color: var(--rossa-coral); }
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__msg {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: var(--rossa-radius);
  font-size: 13px;
}
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__msg--ok {
  background: #e8f8f4;
  color: var(--rossa-green);
}
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__msg--err {
  background: var(--rossa-salmon);
  color: var(--rossa-coral);
}
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__form {
  display: grid;
  gap: 12px;
  max-width: 480px;
}
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__form label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rossa-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__form input[type="text"],
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__form input[type="password"],
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__form select {
  width: 100%;
  box-sizing: border-box;
}
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__form--inline {
  margin-top: 12px;
}
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__result {
  margin-top: 16px;
}
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__result h4 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--rossa-teal);
}
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__result dl {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 6px 12px;
  margin: 0;
  font-size: 13px;
}
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__result dt {
  color: var(--rossa-muted);
}
#contenido_admin #aeatIdentificacion .rossa-aeat-ident__result dd {
  margin: 0;
}

/*---- Folio: estado AEAT VNifV2 en ficha de cliente ----*/
#contenido_admin .fv-detail .fv-aeat {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--rossa-border);
  background: #fff;
}
#contenido_admin .fv-detail .fv-aeat__label {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.35;
}
#contenido_admin .fv-detail .fv-aeat--ok {
  background: rgba(25, 172, 138, 0.1);
  border-color: rgba(25, 172, 138, 0.45);
}
#contenido_admin .fv-detail .fv-aeat--ok .fv-aeat__label { color: var(--rossa-green); }
#contenido_admin .fv-detail .fv-aeat--ko {
  background: var(--rossa-salmon);
  border-color: rgba(234, 92, 54, 0.45);
}
#contenido_admin .fv-detail .fv-aeat--ko .fv-aeat__label { color: var(--rossa-coral); }
#contenido_admin .fv-detail .fv-aeat--warn {
  background: rgba(234, 92, 54, 0.08);
  border-color: rgba(234, 92, 54, 0.3);
}
#contenido_admin .fv-detail .fv-aeat--warn .fv-aeat__label { color: var(--rossa-coral); }
#contenido_admin .fv-detail .fv-aeat--pending,
#contenido_admin .fv-detail .fv-aeat--skip {
  background: #fafbfb;
}
#contenido_admin .fv-detail .fv-aeat--pending .fv-aeat__label,
#contenido_admin .fv-detail .fv-aeat--skip .fv-aeat__label { color: var(--rossa-muted); }
#contenido_admin .fv-detail .fv-aeat__meta,
#contenido_admin .fv-detail .fv-aeat__census {
  margin: 0;
  font-size: 12px;
  color: var(--rossa-muted);
  line-height: 1.4;
}
#contenido_admin .fv-detail .fv-aeat__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
#contenido_admin .fv-detail .fv-panel__head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
#contenido_admin .fv-detail #fv-aeat-check.is-blocked,
#contenido_admin .fv-detail #fv-aeat-check[aria-disabled="true"] {
  opacity: 0.55;
  cursor: help;
}

/*------------------------------------------------- 62. ESTADO VERIFACTU (SAT)
   Página module=mp&modpage=fcts02:verifactuVisor. Flat white, tokens only. */
#contenido_admin:has(> .rossa-fact-verifactu) > h1 {
  display: none !important;
}
#contenido_admin .rossa-fact-verifactu {
  font-family: var(--rossa-font);
  color: var(--rossa-ink);
}
#contenido_admin .rossa-fact-verifactu .vf-panel__title {
  color: var(--rossa-teal);
}
#contenido_admin .rossa-fact-verifactu .vf-panel__lead,
#contenido_admin .rossa-fact-verifactu .vf-stat__label,
#contenido_admin .rossa-fact-verifactu .vf-panel__empty {
  color: var(--rossa-muted);
}
#contenido_admin .rossa-fact-verifactu .vf-stat,
#contenido_admin .rossa-fact-verifactu .vf-table {
  background: var(--rossa-white);
  box-shadow: none;
}
#contenido_admin .rossa-fact-verifactu .vf-filter {
  background: var(--rossa-white);
  border-color: var(--rossa-border);
  color: var(--rossa-muted);
}
#contenido_admin .rossa-fact-verifactu .vf-filter.is-active {
  color: var(--rossa-teal);
  border-color: var(--rossa-teal);
  background: var(--rossa-white);
}
#contenido_admin .rossa-fact-verifactu .vf-table thead th {
  background: var(--rossa-white);
  color: var(--rossa-muted);
  border-bottom-color: var(--rossa-border);
}
#contenido_admin .rossa-fact-verifactu .vf-row--error td {
  background: var(--rossa-salmon);
}
#contenido_admin .rossa-fact-verifactu .vf-error {
  color: var(--rossa-coral);
}
#contenido_admin .rossa-fact-verifactu .admin_link {
  color: var(--rossa-cyan);
}
#contenido_admin .rossa-fact-verifactu .vf-flash--ok {
  background: #e8f8f4;
  color: var(--rossa-green);
}
#contenido_admin .rossa-fact-verifactu .vf-flash--error {
  background: var(--rossa-salmon);
  color: var(--rossa-coral);
}
#contenido_admin .rossa-fact-verifactu .vf-cancel-btn {
  background: var(--rossa-salmon);
  color: var(--rossa-coral);
  box-shadow: none;
}
#contenido_admin .fv-banner__detail {
  margin-top: 8px;
  font-size: 13px;
  color: var(--rossa-muted);
  word-break: break-word;
}

/*=============================================================================
  64. GESTOR DE PAGOS — modal «Seleccionar tipo de método de pago»
  ---------------------------------------------------------------------------
  El __body de esta pantalla va con padding 0, así que lo pone el contenido. El
  desplegable es un select2 anclado a la caja del modal (dropdownParent en
  gestion_pagos.js). El bloque responsive cubre todos los modales de la pantalla.
=============================================================================*/

#modal-create-payment-method-selector .rossa-modal {
  max-width: 460px !important;
  min-height: 232px !important;
  transition: min-height .16s ease;
}
#modal-create-payment-method-selector .rossa-modal:has(.select2-container--open) {
  min-height: min(428px, 80vh) !important;
}
/* Sin :has() se reserva la altura siempre: preferible a recortar el desplegable. */
@supports not selector(:has(*)) {
  #modal-create-payment-method-selector .rossa-modal {
    min-height: min(428px, 80vh) !important;
  }
}
/* Recolocarse al crecer mueve el campo bajo el cursor */
#modal-create-payment-method-selector .select2-results__option {
  animation: rossa-pm-drop-armed .26s step-end;
}
@keyframes rossa-pm-drop-armed {
  from { pointer-events: none; }
  to   { pointer-events: auto; }
}
/* El desplegable entra al ritmo del crecimiento de la caja: sin esto aparece
   entero de golpe y se ve recortado hasta que la caja termina de crecer. */
#modal-create-payment-method-selector .select2-dropdown {
  animation: rossa-pm-drop-in .16s ease both;
}
@keyframes rossa-pm-drop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#modal-create-payment-method-selector .rossa-modal__body {
  display: flex !important;
  flex-direction: column !important;
}
#contenido_admin.rossa-wc-edit .rossa-pm-typesel {
  padding: 20px 20px 4px;
  margin: 0;
}
#contenido_admin.rossa-wc-edit .rossa-pm-typesel__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--rossa-muted);
}
#contenido_admin.rossa-wc-edit .rossa-pm-typesel__hint {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--rossa-muted);
}
/* Pie dentro del __body (el helper mete todo el contenido ahí): se separa del
   campo y queda pegado al borde inferior de la caja. */
#contenido_admin.rossa-wc-edit .rossa-pm-typesel__foot {
  gap: 10px;
  margin-top: auto;
}
/* Control a ancho completo del campo. */
#modal-create-payment-method-selector .select2-container { width: 100% !important; }
#modal-create-payment-method-selector .select2-results > .select2-results__options {
  max-height: min(190px, calc(80vh - 192px));
  overflow-y: auto;
}

/*----- 64.1 Móvil (≤700px, el breakpoint del chrome legacy) -----------------*/
@media (max-width: 700px) {
  /* Overlay: casi todo el ancho disponible y anclado arriba, que en pantallas
     bajas centrar deja el modal debajo del teclado virtual. */
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay {
    padding: 12px !important;
    align-items: flex-start !important;
  }
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-modal {
    max-width: 100% !important;
    max-height: calc(100vh - 24px) !important;
    margin: 0 auto !important;
  }
  /* Mismo mecanismo, acotado a la pantalla (pantallas bajas / horizontal). */
  #modal-create-payment-method-selector .rossa-modal:has(.select2-container--open) {
    min-height: min(428px, calc(100vh - 24px)) !important;
  }
  #modal-create-payment-method-selector .select2-results > .select2-results__options {
    max-height: min(190px, calc(100vh - 216px));
  }
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-modal__head {
    padding: 12px 14px !important;
  }
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-modal__title {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
  #contenido_admin.rossa-wc-edit .rossa-pm-typesel { padding: 14px 14px 4px !important; }
  /* Pie: botones a ancho completo y el primario arriba (column-reverse invierte
     el orden del DOM, donde «Siguiente» va último). */
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-modal__foot {
    flex-direction: column-reverse !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-modal__foot .admin_boton {
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }
  /* Formularios de los otros modales (redsys / transferencia): el padding de
     24px va inline en el <form>, de ahí el !important. */
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay form {
    padding: 14px !important;
    gap: 12px !important;
  }
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-form-row input,
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-form-row select {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/*----- 64.2 Cards de métodos y políticas (grid de .rossa-box-payment-methods) --                 */
#contenido_admin.rossa-wc-edit .rossa-box-payment-methods { align-items: stretch; }
#contenido_admin.rossa-wc-edit .rossa-box-payment-methods .rossa-wc-card {
  height: 100% !important;
  margin-bottom: 0 !important;
}
#contenido_admin.rossa-wc-edit .rossa-box-payment-methods .rossa-wc-card__body {
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  /* sangría izquierda = ancho del punto de estado + su gap, para alinear con el título */
  padding: 0 16px 14px 32px !important;
}
#contenido_admin.rossa-wc-edit .rossa-box-payment-methods .rossa-wc-card__body > p {
  flex: 0 0 auto !important;
  align-self: stretch !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
}
/* Acciones: siempre al pie y a la derecha; margin-top auto las empuja al fondo
   para que queden alineadas entre cards de la misma fila del grid. */
#contenido_admin.rossa-wc-edit .rossa-box-payment-methods .rossa-wc-card__actions {
  margin-top: auto !important;
  align-self: stretch !important;
  justify-content: flex-end !important;
  flex-wrap: wrap;
}
/* Cabecera: el nombre puede ser largo, así que la etiqueta (importe o tipo) baja
   a su propia línea en vez de partir el título. */
#contenido_admin.rossa-wc-edit .rossa-box-payment-methods .rossa-wc-card__name {
  line-height: 1.4 !important;
  overflow-wrap: anywhere;
}
#contenido_admin.rossa-wc-edit .rossa-box-payment-methods .rossa-wc-card__name .rossa-wc-tag {
  display: table !important;
  margin: 6px 0 0 !important;
}
#contenido_admin.rossa-wc-edit .rossa-box-payment-methods .rossa-wc-card__top {
  padding-top: 14px;
}

/*----- 64.3 Formularios de los modales y botones de asignaciones ---------------
  Dos arreglos de reparto de espacio:  */
#contenido_admin.rossa-wc-edit .rossa-form-row input[type="number"] {
  width: 100%;
  padding: 8px 14px;
  box-sizing: border-box;
}
#contenido_admin.rossa-wc-edit .rossa-form-row > div > input[type="number"] {
  flex: 1 1 auto;
  min-width: 90px;
}
#contenido_admin.rossa-wc-edit .rossa-form-row > div > input[type="number"] + .select2-container,
#contenido_admin.rossa-wc-edit .rossa-form-row > div > input[type="number"] + select {
  flex: 0 0 auto !important;
  width: 158px !important;
}
/* Toggles de asignación (origen↔método y política↔método): mismo ancho que el
   texto más largo ("Desactivar"), para que no baile al cambiar de estado. */
#contenido_admin.rossa-wc-edit .toggle-policy-assignment,
#contenido_admin.rossa-wc-edit form:has(input[value="update_assignment_status"]) > button {
  min-width: 106px;
  justify-content: center;
  text-align: center;
}

/*----- 64.4 Modales del gestor de pagos en móvil (≤700px) ---------------------- */
@media (max-width: 700px) {
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-form-row {
    align-items: stretch !important;
    padding: 2px 0 !important;
    gap: 6px !important;
  }
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-form-row > div {
    width: 100% !important;
    max-width: none !important;
  }
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-form-row input,
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-form-row textarea,
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-form-row select,
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-form-row .select2-container {
    max-width: none !important;
  }
  /* fracción: el desplegable se queda algo más corto y el número toma el resto
     (basis auto para que el flex:1 inline no lo deje en su mínimo). */
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-form-row > div > input[type="number"] + .select2-container,
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-form-row > div > input[type="number"] + select {
    flex: 0 0 auto !important;
    width: 140px !important;
  }
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-form-row > div > input[type="number"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  /* switch + texto de ayuda: la ayuda pasa debajo en vez de estrujarse al lado */
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-form-row > div:has(> small) {
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
  }
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-form-row > div > small {
    flex: 1 0 100%;
    line-height: 1.4;
  }
  /* pie del formulario: el helper usa __footer (clase inexistente en el tema) y
     el selector nuevo __foot; se cubren las dos. Botones a ancho completo. */
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-modal__footer,
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay form .rossa-modal__foot {
    flex-direction: column-reverse !important;
    gap: 8px !important;
    /* auto (no una medida fija): en los modales de altura reservada el pie tiene
       que quedarse pegado al fondo, o el desplegable abierto lo tapa. */
    margin-top: auto !important;
  }
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-modal__footer .admin_boton,
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay form .rossa-modal__foot .admin_boton {
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }
}

/*----- 64.5 Modales de asignación: mismo comportamiento que el selector de tipo -- */
#modal-assignment-add .rossa-modal,
#modal-policy-assignment .rossa-modal {
  max-width: 520px !important;
  min-height: 232px !important;
  transition: min-height .16s ease;
}
/* Crece al abrir el desplegable y vuelve al cerrarlo, PROPORCIONAL al número de
   opciones */
#modal-assignment-add .rossa-modal:has(.select2-container--open),
#modal-policy-assignment .rossa-modal:has(.select2-container--open) {
  min-height: min(475px, 80vh) !important;
}
#modal-assignment-add .rossa-modal:has(.select2-container--open):has(.select2-results__option:first-child:nth-last-child(5)),
#modal-policy-assignment .rossa-modal:has(.select2-container--open):has(.select2-results__option:first-child:nth-last-child(5)) {
  min-height: min(450px, 80vh) !important;
}
#modal-assignment-add .rossa-modal:has(.select2-container--open):has(.select2-results__option:first-child:nth-last-child(4)),
#modal-policy-assignment .rossa-modal:has(.select2-container--open):has(.select2-results__option:first-child:nth-last-child(4)) {
  min-height: min(420px, 80vh) !important;
}
#modal-assignment-add .rossa-modal:has(.select2-container--open):has(.select2-results__option:first-child:nth-last-child(-n+3)),
#modal-policy-assignment .rossa-modal:has(.select2-container--open):has(.select2-results__option:first-child:nth-last-child(-n+3)) {
  min-height: min(350px, 80vh) !important;   /* apenas crece: el desplegable ya cabe */
}
@supports not selector(:has(*)) {
  #modal-assignment-add .rossa-modal,
  #modal-policy-assignment .rossa-modal { min-height: min(475px, 80vh) !important; }
}
#modal-assignment-add .select2-results__option,
#modal-policy-assignment .select2-results__option {
  animation: rossa-pm-drop-armed .26s step-end;
}
#modal-assignment-add .select2-dropdown,
#modal-policy-assignment .select2-dropdown {
  animation: rossa-pm-drop-in .16s ease both;
}
#modal-assignment-add .rossa-modal__body,
#modal-policy-assignment .rossa-modal__body {
  display: flex !important;
  flex-direction: column !important;
}
#modal-assignment-add .rossa-modal__body > form,
#modal-policy-assignment .rossa-modal__body > form {
  flex: 1 1 auto !important;
}
#modal-assignment-add .rossa-modal__footer,
#modal-policy-assignment .rossa-modal__footer {
  margin-top: auto !important;
}
#modal-assignment-add .select2-results > .select2-results__options,
#modal-policy-assignment .select2-results > .select2-results__options {
  max-height: min(160px, calc(80vh - 220px));
  overflow-y: auto;
}

/*----- 64.6 Móvil: dos ajustes de espacio en la pantalla de pagos -------------- */
@media (max-width: 700px) {
  #contenido_admin.rossa-wc-edit .rossa-modal-overlay .rossa-modal { padding: 0 !important; }

  #contenido_admin.rossa-wc-edit .rossa-wc-list .rossa-wc-card__body {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 0 14px 12px 30px !important;
  }
  #contenido_admin.rossa-wc-edit .rossa-wc-list .rossa-wc-card__body > p {
    flex: 0 0 auto !important;
    line-height: 1.45 !important;
  }
  #contenido_admin.rossa-wc-edit .rossa-wc-list .rossa-wc-card__actions {
    margin-left: 0 !important;
    justify-content: flex-end !important;
    flex-wrap: wrap;
  }
  #contenido_admin.rossa-wc-edit .rossa-wc-list .rossa-wc-card__top { padding: 12px 14px 0 !important; }
}