/* Layout responsive comun de los mockups (D-033).
   Los mockups llevan el estilo visual en atributos style=; aqui va SOLO lo que
   no cabe en un atributo: reglas con media query y utilidades de colapso.
   Casi todo va con !important porque compite contra el estilo en linea.
   Los colores usan var(--ag-*, <hex de paper-light>): asi funciona igual en los
   mockups que enlazan _paletas.css y en los que aun llevan el hex literal. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; margin: 0; }
body { overflow-x: hidden; }
img, svg, video { max-width: 100%; }
input, select, textarea, button { font-family: inherit; max-width: 100%; }

/* ---------- 1 · El lienzo ---------- */
/* .app  : crece con el contenido, nunca se sale de la ventana.
   .app-fija : ademas llena el alto exacto en escritorio (dia, semana, mes,
   pestanas, apariencia). En pantalla baja o estrecha suelta el alto y hace
   scroll normal, que es lo unico que cabe en un movil. */
.app { width: 100%; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden; }
.app-fija { height: 100dvh; overflow: hidden; }
@media (max-width: 980px), (max-height: 640px) {
  .app-fija { height: auto; min-height: 100dvh; overflow: visible; }
}

/* Dentro del armazon de la aplicacion, el alto disponible NO es el de la ventana: por encima esta
   la cabecera del framework y alrededor el relleno del area de contenido. Escribir 100dvh aqui
   sacaba la agenda 88px por debajo del borde y dejaba DOS barras de scroll en dia, semana, mes,
   pestanas y apariencia (medido en navegador el 2026-08-29: innerHeight 800, scrollHeight 888).

   El hueco se compone con las variables del PROPIO framework y no con los 88px medidos: el dia que
   la cabecera cambie de alto, esto sigue cuadrando solo. Las paginas publicas -portada, alta, pago,
   acceso- no viven dentro del armazon, asi que no entran aqui y siguen ocupando la ventana entera. */
.app-shell__content { --ag-hueco-armazon: calc(var(--dm-header-height, 56px) + var(--dm-space-4, 16px) * 2); }
.app-shell__content .app { min-height: calc(100dvh - var(--ag-hueco-armazon)); }
.app-shell__content .app-fija { height: calc(100dvh - var(--ag-hueco-armazon)); }
@media (max-width: 980px), (max-height: 640px) {
  .app-shell__content .app-fija { height: auto; min-height: calc(100dvh - var(--ag-hueco-armazon)); }
}

/* ---------- 2 · Barras ---------- */
.topbar { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 1180px) {
  .topbar { height: auto !important; min-height: 60px; padding: 9px 16px !important; gap: 14px !important; }
}
@media (max-width: 620px) {
  .topbar { gap: 10px !important; padding: 8px 12px !important; }
}

.subbar { flex-wrap: wrap; row-gap: 10px; }
@media (max-width: 1180px) {
  .subbar { height: auto !important; min-height: 68px; padding: 12px 16px !important; gap: 14px !important; }
}
@media (max-width: 620px) {
  .subbar { padding: 12px 12px !important; }
}

/* Caja de busqueda: se estira y se encoge, nunca impone 280px */
.buscador { flex: 1 1 190px; min-width: 130px; max-width: 320px; }

/* Menu desplegable de la cuenta: nunca mas ancho que la ventana */
.menu { max-width: calc(100vw - 24px); }

/* Grupo de pestanas dia/semana/mes: no se parte */
.segmentos { flex-shrink: 0; }

/* ---------- 3 · Rejillas de pantalla ---------- */
/* Dos columnas con panel a la derecha */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lateral, clamp(260px, 25vw, 336px));
  min-height: 0;
}
/* Dos columnas con panel a la izquierda */
.split-izq {
  display: grid;
  grid-template-columns: var(--lateral, clamp(300px, 30vw, 428px)) minmax(0, 1fr);
  min-height: 0;
}
/* Tres columnas */
.split3 {
  display: grid;
  grid-template-columns: var(--col1, clamp(220px, 22vw, 296px)) minmax(0, 1fr) var(--col3, clamp(240px, 24vw, 344px));
  min-height: 0;
}

@media (max-width: 1240px) {
  .split3 { grid-template-columns: var(--col1, clamp(200px, 24vw, 296px)) minmax(0, 1fr) !important; }
  .split3 > :nth-child(3) {
    grid-column: 1 / -1;
    border-left: 0 !important;
    border-top: 1px solid var(--ag-borde, #E2D9C8) !important;
  }
}

@media (max-width: 980px) {
  .split, .split-izq, .split3 { grid-template-columns: minmax(0, 1fr) !important; }
  .split > *, .split-izq > *, .split3 > * {
    grid-column: auto !important;
    min-width: 0;
    overflow: visible !important;
  }
  /* al apilar, el borde lateral pasa a ser superior */
  .split > :nth-child(n + 2),
  .split-izq > :nth-child(n + 2),
  .split3 > :nth-child(n + 2) {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 1px solid var(--ag-borde, #E2D9C8) !important;
  }
  /* los paneles laterales dejan de pelear por el alto */
  .lateral { max-height: none !important; height: auto !important; }
}

/* ---------- 4 · Rejillas de calendario ---------- */
/* Debajo de cierto ancho las 7 columnas no caben: se scrollan en horizontal
   dentro de su caja, sin arrastrar la pagina entera. */
.scroll-x { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.rejilla-mes { grid-auto-rows: minmax(86px, 1fr); }

@media (max-width: 860px) {
  .scroll-x { overflow-y: visible; }
  .ancho-min-7 { min-width: 700px; }
  .ancho-min-6 { min-width: 720px; }
  .rejilla-mes { grid-auto-rows: minmax(96px, auto) !important; }
}

/* Cuadricula de horas de la vista diaria/semanal */
@media (max-width: 640px) {
  .franja-hora { font-size: 10px !important; }
}

/* ---------- 5 · Utilidades ---------- */
.fluido { width: 100% !important; max-width: 100%; }
.envoltura { flex-wrap: wrap; }
.crece { flex: 1 1 auto; min-width: 0; }

@media (max-width: 1180px) { .ocultar-xl { display: none !important; } }
@media (max-width: 980px)  { .ocultar-lg { display: none !important; } }
@media (max-width: 780px)  { .ocultar-md { display: none !important; } }
@media (max-width: 900px) { .cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 620px)  {
  .ocultar-sm { display: none !important; }
  .apilar { flex-direction: column !important; align-items: stretch !important; }
  .apilar > * { width: 100% !important; }
  .cols2, .cols3 { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Paneles y tarjetas centradas: nunca mas anchas que su hueco */
.tarjeta { width: 100%; max-width: 100%; }

/* Tablas: se scrollan en horizontal en vez de romper la pagina */
.tabla-scroll { width: 100%; overflow-x: auto; }
.tabla-scroll > table { min-width: 640px; }

/* ---------- 6 · Rejillas concretas de pantalla ---------- */
/* Semana: siete columnas mientras el lienzo llena la ventana; por debajo se
   apilan y el scroll pasa a ser el de la pagina. */
.rejilla-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 980px) { .rejilla-semana { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 620px) { .rejilla-semana { grid-template-columns: minmax(0, 1fr) !important; } }

/* Pie de totales de la semana */
.totales { display: grid; grid-template-columns: clamp(128px, 15vw, 168px) repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .totales { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; height: auto !important; }
  .totales > * { border-right: 0 !important; border-bottom: 1px solid var(--ag-linea, #EFE9DC); padding: 12px 16px !important; }
}
@media (max-width: 620px) { .totales { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Fila de tabla de la pantalla de pestanas */
@media (max-width: 780px) {
  .fila { grid-template-columns: 22px minmax(0, 1fr) !important; row-gap: 4px !important; }
  .fila > :nth-child(n + 3) { grid-column: 2 !important; }
}

/* Bloque de dos mitades que se apila pronto (etiqueta + control) */
.par { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.par > .etiqueta { width: 190px; flex-shrink: 0; }
@media (max-width: 780px) { .par > .etiqueta { width: 100% !important; } }

/* Columna de contenido con scroll propio: en movil suelta el scroll */
@media (max-width: 980px) {
  .col-scroll { overflow: visible !important; max-height: none !important; }
}

/* Fila del historico de datos: la tercera columna cae debajo en pantalla estrecha */
@media (max-width: 620px) {
  .fila-hist { grid-template-columns: minmax(0, 1fr) auto !important; row-gap: 2px !important; }
  .fila-hist > :nth-child(3) { grid-column: 1 / -1 !important; }
}

/* Cuando la barra superior envuelve, el boton de cuenta baja a la izquierda y el
   menu abierto (los mockups lo pintan siempre) se saldria por la izquierda. */
@media (max-width: 1180px) {
  .menu { right: auto !important; left: 0 !important; }
}

/* El menu de cuenta que los mockups pintan siempre abierto: en movil se ancla a
   la ventana en vez de a su boton, o se saldria por la derecha. */
@media (max-width: 620px) {
  .ancla-menu { position: static !important; }
  .menu { left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; }
}

/* ---------- 9 · Titulos que no caben ---------- */
/* Un titulo largo se RECORTA con puntos suspensivos; no se sale de su caja ni empuja lo de al lado.
   Medido el 2026-08-29 en el dia cargado: los titulos largos se cortaban a media palabra contra el
   borde, sin ninguna señal de que seguian. Se recorta por lineas —dos en las cajas del dia y de la
   semana, una en las de la rejilla del mes— y la palabra larga que no quepa se parte antes de
   desbordar. El texto entero sigue estando en la ficha, que es donde se lee. */
[id="day-slots-field-title"],
[id="day-items-field-title"],
[id="week-days.slots-field-title"],
[id="week-days.items-field-text"] {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  min-width: 0;
}

[id="month-cells.items-field-text"] {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}