/* ── Color de GMAO dentro de su contenido (CONTRATO-UI A2.3) ────────────────
   El color sale solo del manifiesto ("color"): el shell lo pone como --app en
   <body> y de él deriva --app-d/--app-soft/--app-ink. Aquí GMAO solo pide que
   su contenido use esos tonos en vez de los --brand* del portal, en su ámbito:
     - #vista.gmao-scope → el shell pone esa clase mientras GMAO es la activa.
     - la ficha abierta (montada en <body>, fuera de #vista), solo mientras
       GMAO es la activa (:has), para no teñir la ficha de otra app acoplada.
   Las custom properties solo heredan hacia abajo: nada de esto llega al
   chrome (#col1/#col2/#topbar/#pageHead) ni a otra app.                      */
#vista.gmao-scope,
body.ui-modal-abierto:has(#vista.gmao-scope) {
    --brand:      var(--app);
    --brand-d:    var(--app-d);
    --brand-soft: var(--app-soft);
    --brand-ink:  var(--app-ink);
}

/* La navegación activa (.nav-it.sel) y las htabs ya usan estos tokens desde
   base.css — GMAO no necesita reglas propias de navegación. */

/* ── Badge de estado en OTs ─────────────────────────────────────────────────
   Forma y convención de color de CONTRATO-UI B6: el color del estado llega en
   --c; fondo al 16 % y texto al 65 % mezclado con la tinta.                  */
.gmao-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    --c: var(--muted);
    background: color-mix(in srgb, var(--c) 16%, transparent);
    color: color-mix(in srgb, var(--c) 65%, var(--ink));
}
.gmao-badge.pendiente  { --c: var(--warn); }
.gmao-badge.asignada   { --c: var(--blue); }
.gmao-badge.en_curso   { --c: var(--brand-ink); }
.gmao-badge.finalizada { --c: var(--pos); }
.gmao-badge.cerrada    { --c: var(--muted); }
.gmao-badge.abierta    { --c: var(--neg); }
.gmao-badge.en_ot      { --c: var(--blue); }
/* Usuarios y tipos de OT */
.gmao-badge.activo     { --c: var(--pos); }
.gmao-badge.inactivo   { --c: var(--muted); }
/* Activos */
.gmao-badge.operativo     { --c: var(--pos); }
.gmao-badge.averia        { --c: var(--neg); }
.gmao-badge.mantenimiento { --c: var(--warn); }
.gmao-badge.baja          { --c: var(--muted); }

/* ── Badge de prioridad (misma forma que el de estado) ───────────────────── */
.gmao-prioridad {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    --c: var(--muted);
    background: color-mix(in srgb, var(--c) 16%, transparent);
    color: color-mix(in srgb, var(--c) 65%, var(--ink));
}
.gmao-prioridad.media   { --c: var(--warn); }
.gmao-prioridad.alta    { --c: var(--neg); }
/* Crítica: el mismo rojo que alta, más cargado y en negrita para que destaque. */
.gmao-prioridad.critica { --c: var(--neg); background: color-mix(in srgb, var(--neg) 30%, transparent); font-weight: 800; }

/* ── Tablero de OTs (UiTablero, CONTRATO-UI B6) ─────────────────────────────
   Columnas, marco de tarjeta, arrastre y «⋯» los pone ui.css (.ui-tablero*); aquí solo el
   contenido de la tarjeta de una OT (dominio de GMAO). */
.kb-ayuda { margin: 0 0 14px; font-size: 12px; color: var(--muted); }
.kb-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
/* La prioridad va junto al número, a la izquierda: la esquina derecha es del «⋯» de UiTablero. */
.kb-ot { font-size: 12.5px; font-weight: 800; color: var(--blue); }
.kb-titulo {
    margin: 0 0 6px;
    font-size: 13px; font-weight: 600; line-height: 1.35;
    color: var(--ink);
}
.kb-activo {
    margin: 0 0 10px;
    display: flex; align-items: center; gap: 5px;
    font-size: 11.5px; color: var(--muted);
}
.kb-ico { font-size: 11px; flex: 0 0 auto; }

/* Progreso por estado: azul; en curso, color de la app (como línea, --brand-ink); finalizada, verde. */
.kb-progreso {
    height: 5px;
    background: var(--line);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
}
.kb-progreso-barra { height: 100%; background: var(--blue); border-radius: 3px; }
.kb-progreso.kb-en_curso .kb-progreso-barra { background: var(--brand-ink); }
.kb-progreso.kb-finalizada .kb-progreso-barra { background: var(--pos); }

.kb-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.kb-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 2px 7px;
}

.kb-card-pie {
    display: flex; align-items: center; gap: 7px;
    border-top: 1px solid var(--line);
    padding-top: 9px;
}
.kb-avatar {
    width: 24px; height: 24px; flex: 0 0 auto;
    border-radius: 50%;
    background: var(--brand); color: var(--app-on);
    display: grid; place-items: center;
    font-size: 10px; font-weight: 800;
}
.kb-tecnico {
    font-size: 11.5px; font-weight: 600; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kb-tecnico.kb-sin { color: var(--muted); font-weight: 400; font-style: italic; }

/* ── Tablas (.ui-tabla, CONTRATO-UI B3): solo lo propio de GMAO ───────────── */
/* Fila apagada: un registro que se ve pero no cuenta (tipo de OT inactivo,
   activo que sale solo por ser padre de un resultado). */
.gmao-fila-apagada td { color: var(--muted); }
/* Árbol de activos: sangría por nivel (--nivel en la celda) y flecha de rama. */
.ui-tabla td.gmao-arbol { padding-left: calc(14px + var(--nivel, 0) * 22px); }
.gmao-arbol-rama { color: var(--muted); }
/* ── Ficha de OT: datos a la izquierda, costes en una columna a la derecha
   (de momento solo la usa tecnico.js, pintarOt()). Flexbox, no grid: con
   grid, la columna central (más alta) fija el alto de la fila y la
   columna de costes -un flex column con flex:1 en sus tarjetas- debería
   estirarse a juego, pero el "flex-basis:0" de esas tarjetas hace que su
   aportación de alto intrínseco a la pista de grid sea mínima y el
   estirado deja huecos arriba y abajo en vez de repartir las tarjetas.
   Con flexbox, align-items:stretch iguala el alto de las dos columnas de
   forma directa (sin ese paso intermedio de "pista de grid"), así que las
   tarjetas sí llenan todo el alto disponible. */
.gmao-mficha-body {
    display: flex;
    gap: 24px;
    align-items: stretch;
}
.gmao-mficha-central { flex: 1 1 0; min-width: 0; }
@media (max-width: 760px) { .gmao-mficha-body { flex-direction: column; } }

/* Línea separadora entre los apartados de la columna central (Descripción
   del activo / Descripción / Asignación y planificación / Diagnóstico) —
   el mock las llevaba y se habían quedado fuera de la implementación.
   Mismo hueco (16px) arriba y abajo de cada línea, vía padding en los dos
   sentidos en vez del margin-bottom de .ui-mbloque; el primer apartado
   (justo debajo de la rejilla superior) no lleva línea ni hueco arriba.
   ">" en vez de ".ui-mbloque" a secas porque :first-child no distingue
   por clase — así detecta el primer apartado sea cual sea (la rejilla
   siempre lo es, ya que "Descripción del activo" y "Descripción" son
   opcionales según tenga o no datos la OT). */
.gmao-mficha-central > .ui-mrejilla,
.gmao-mficha-central > .ui-mbloque {
    padding: 16px 0;
    margin: 0;
    border-top: 1.5px solid var(--ui-line-dark);
}
.gmao-mficha-central > :first-child {
    border-top: none;
    padding-top: 0;
}

/* Ancho fijo (no crece ni encoge) y alto igualado al de la columna
   central por el align-items:stretch de .gmao-mficha-body. Dentro, grid de
   4 filas "1fr" en vez de 4 hijos flex:1: con flex, el reparto depende del
   tamaño mínimo/de contenido que el navegador calcule para cada tarjeta
   (flex-basis:0 es solo una pista, no una garantía) y en la práctica la
   última tarjeta salía visiblemente más alta que las otras tres. Con grid
   y filas "1fr" el reparto es exacto por definición: las 4 filas miden
   siempre lo mismo, sea cual sea el contenido de dentro. */
.gmao-mficha-costes { flex: 0 0 220px; display: grid; grid-template-rows: repeat(4, 1fr); gap: 10px; }
@media (max-width: 760px) { .gmao-mficha-costes { flex-basis: auto; } }
.gmao-mficha-costes .kpi {
    /* Contenido pegado arriba, no centrado: con 4 filas iguales de sobra
       para el texto que llevan dentro, centrarlo dejaba mucho relleno del
       propio gris de la tarjeta por encima y por debajo del texto — un
       gris tan parecido al fondo blanco de la ficha que en una captura se
       leía como si fuera hueco vacío ANTES de la tarjeta, no relleno
       DENTRO de ella. Pegado arriba, el borde de la tarjeta queda
       inequívoco justo debajo de la línea separadora. */
    display: flex; flex-direction: column; justify-content: flex-start; min-height: 0;
    /* Tarjeta KPI de ficha (CONTRATO-UI B6): fondo --bg, borde --line, sin sombra, radio 0. */
    background: var(--bg); border: 1px solid var(--line); box-shadow: none;
    border-radius: 0;
}
.gmao-mficha-costes .kpi .val { font-size: 24px; }
.gmao-mficha-costes .kpi .val small { font-size: 13px; }
/* El total no necesita letra más grande — el fondo de marca ya lo distingue. */
.gmao-mficha-costes .kpi.total { background: var(--brand-soft); border-color: var(--brand-soft); }
.gmao-mficha-costes .kpi.total .val { color: var(--brand-ink); }

/* ── Calendario (rejilla día/hora) ───────────────────────────────────────── */
.cal-barra {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap; margin-bottom: 14px;
}
.cal-nav { display: flex; gap: 6px; flex: 0 0 auto; }
.cal-rango {
    flex: 1; margin: 0;
    font-size: 15px; font-weight: 700; color: var(--ink);
    text-transform: capitalize;
}
.cal-modos { display: flex; gap: 6px; flex: 0 0 auto; }

.cal-wrap {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    /* Las columnas tienen un ancho mínimo (minmax) para que quepan bien la
       hora + el técnico en la primera línea de cada bloque; si en pantallas
       más estrechas no cabe el total, se desplaza en horizontal en vez de
       comprimir las columnas hasta hacerlas ilegibles. */
    overflow-x: auto;
}

/* Cabecera de días */
.cal-cabecera {
    display: grid;
    grid-template-columns: 56px repeat(7, minmax(180px, 1fr));
    border-bottom: 1px solid var(--line);
}
.cal-dia .cal-cabecera,
.cal-dia .cal-cuerpo,
.cal-dia .cal-allday { grid-template-columns: 56px 1fr; }

.cal-h {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 8px 4px;
    border-left: 1px solid var(--line);
}
.cal-h-hora { border-left: none; }
.cal-h-dia {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; color: var(--muted);
}
.cal-h-num { font-size: 16px; font-weight: 700; color: var(--ink); }
.cal-h.cal-hoy .cal-h-num {
    background: var(--brand); color: var(--app-on);
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; font-size: 13px;
}

/* Franja de eventos sin hora */
.cal-allday {
    display: grid;
    grid-template-columns: 56px repeat(7, minmax(180px, 1fr));
    border-bottom: 1px solid var(--line);
    background: var(--bg);
}
.cal-allday-lbl {
    font-size: 9.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .3px; color: var(--muted);
    padding: 6px 4px; text-align: right;
}
.cal-allday-col {
    border-left: 1px solid var(--line);
    padding: 4px; min-height: 30px;
    display: flex; flex-direction: column; gap: 3px;
}

/* Cuerpo con rejilla horaria */
.cal-cuerpo {
    display: grid;
    grid-template-columns: 56px repeat(7, minmax(180px, 1fr));
    max-height: 620px;
    overflow-y: auto;
}
.cal-horas { border-right: 1px solid var(--line); }
.cal-hora {
    font-size: 10.5px; color: var(--muted);
    padding: 2px 6px 0 0; text-align: right;
    box-sizing: border-box;
}
.cal-col { position: relative; border-left: 1px solid var(--line); min-width: 0; }
.cal-col.cal-hoy { background: var(--brand-soft); }
.cal-slot { border-bottom: 1px solid var(--line); box-sizing: border-box; position: relative; }
/* Diana de media hora: la mitad superior/inferior de la franja se resalta
   según en qué mitad esté el ratón, y ahí es donde caerá el evento. */
.cal-slot.cal-diana-0::before,
.cal-slot.cal-diana-30::before {
    content: ''; position: absolute; left: 0; right: 0; height: 50%;
    background: color-mix(in srgb, var(--blue) 20%, transparent);
    pointer-events: none;
}
.cal-slot.cal-diana-0::before  { top: 0; }
.cal-slot.cal-diana-30::before { bottom: 0; }
/* Mientras se arrastra algo, los DEMÁS bloques no deben capturar el
   dragover (si no, soltar sobre una franja ocupada nunca llega a la diana
   de debajo). El propio bloque que se está arrastrando queda excluido: en
   algunos navegadores, quitarle pointer-events al elemento de origen a
   mitad de un drag nativo puede confundir el seguimiento del gesto. */
#calCuerpo.cal-arrastrando .cal-ev:not(.cal-ev-arrastrando) { pointer-events: none; }

/* ── Franja de trabajo sin planificar (OTs sin fecha) ────────────────────── */
.cal-sinplan {
    background: var(--bg);
    border: 1px dashed var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 14px;
}
.cal-sinplan-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.cal-sinplan-tit { font-size: 12px; font-weight: 800; color: var(--ink); }
.cal-sinplan-n {
    font-size: 11px; font-weight: 800; color: var(--muted);
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 9px; padding: 1px 7px;
}
.cal-sinplan-ayuda { font-size: 11.5px; color: var(--muted); }
.cal-sinplan-lista { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-sinplan-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    max-width: 230px; text-align: left;
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--warn);
    border-radius: 8px;
    padding: 6px 9px;
    cursor: grab;
    font-family: inherit;
    /* Es un <div>, no un <button>: sin esto el navegador puede iniciar una
       selección de texto en vez de un arrastre, y en Safari el drag nativo
       de elementos no interactivos necesita el prefijo -webkit. */
    user-select: none; -webkit-user-select: none; -webkit-user-drag: element;
}
.cal-sinplan-item:hover { box-shadow: var(--shadow-sm); }
.cal-sinplan-item:active { cursor: grabbing; }
.cal-sinplan-item.cal-sinplan-arrastrando { opacity: .45; }
.cal-sinplan-item-tit {
    font-size: 12px; font-weight: 600; color: var(--ink);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-sinplan-item-sub {
    font-size: 10.5px; color: var(--muted);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Eventos */
.cal-ev {
    position: absolute; left: 3px; right: 3px;
    border: none; border-left: 3px solid var(--blue);
    border-radius: 6px;
    background: var(--blue-soft);
    color: var(--ink);
    text-align: left;
    padding: 3px 6px;
    font-family: inherit; font-size: 11px; line-height: 1.25;
    cursor: pointer; overflow: hidden;
    display: flex; flex-direction: column; gap: 1px;
    /* Es un <div>, no un <button>: sin esto el navegador puede iniciar una
       selección de texto en vez de un arrastre, y en Safari el drag nativo
       de elementos no interactivos necesita el prefijo -webkit. */
    user-select: none; -webkit-user-select: none; -webkit-user-drag: element;
}
.cal-ev:hover { filter: brightness(.96); }
.cal-ev[draggable="true"] { cursor: grab; }
.cal-ev[draggable="true"]:active { cursor: grabbing; }
.cal-ev.cal-ev-arrastrando { opacity: .45; }
.cal-ev-hora {
    display: flex; align-items: baseline; gap: 5px;
    font-weight: 700; font-size: 10px; opacity: .8;
    white-space: nowrap; overflow: hidden;
}
.cal-ev-tec {
    font-weight: 600; text-transform: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.cal-ev-tit {
    font-weight: 600;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* Variante plana: franja "todo el día" y celdas de mes */
.cal-ev-plano {
    position: static;
    display: block; width: 100%;
    border-radius: 5px;
    padding: 3px 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Color por estado de la OT */
.cal-ev-pendiente { border-left-color: var(--warn);  background: color-mix(in srgb, var(--warn) 14%, transparent); }
.cal-ev-asignada  { border-left-color: var(--blue);  background: var(--blue-soft); }
.cal-ev-en_curso  { border-left-color: var(--brand-ink); background: var(--brand-soft); }
.cal-ev-cerrada   { border-left-color: var(--muted); background: color-mix(in srgb, var(--muted) 13%, transparent); }
.cal-ev-preventiva{ border-left-color: var(--blue);  background: var(--blue-soft); }
.cal-ev-vencido   { border-left-color: var(--neg);   background: color-mix(in srgb, var(--neg) 14%, transparent); }

/* Vista de mes */
.cal-mes {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
.cal-m-h {
    padding: 8px 6px; text-align: center;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; color: var(--muted);
    border-bottom: 1px solid var(--line);
    border-left: 1px solid var(--line);
}
.cal-m-h:first-child { border-left: none; }
.cal-m-celda {
    min-height: 96px;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    padding: 5px;
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0;
}
.cal-m-celda:nth-child(7n+1) { border-left: none; }
.cal-m-celda.cal-m-diana { background: color-mix(in srgb, var(--blue) 12%, transparent); }
.cal-m-num { font-size: 12px; font-weight: 700; color: var(--ink); }
.cal-m-fuera { background: var(--bg); }
.cal-m-fuera .cal-m-num { color: var(--muted); font-weight: 400; }
.cal-m-celda.cal-hoy .cal-m-num {
    background: var(--brand); color: var(--app-on);
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
}
.cal-m-mas { font-size: 10px; color: var(--muted); padding-left: 3px; }

@media (max-width: 900px) {
    .cal-cabecera, .cal-cuerpo, .cal-allday { grid-template-columns: 44px repeat(7, minmax(70px, 1fr)); }
    .cal-wrap { overflow-x: auto; }
}

/* ── Alerta de stock bajo ────────────────────────────────────────────────── */
.gmao-stock-bajo {
    color: var(--neg);
    font-weight: 600;
}
.gmao-stock-ok {
    color: var(--pos);
}

/* ── Página: texto de carga y aviso encima de una tabla (.ui-alert del portal) ── */
.gmao-cargando { margin: 0; color: var(--muted); }
.gmao-aviso-pagina { margin: 0 0 16px; }

/* ── Fila de tarjetas de totales de una página (Costes por periodo): .ui-kpi del
   portal; aquí solo su colocación, con la separación de 16px de la escala (B5). */
.gmao-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 16px; }

/* ── Calendario de preventivo ───────────────────────────────────────────── */
/* Plazo de un plan (B6): rojo si ya pasó, ámbar si es hoy; el resto, sin color. */
.gmao-plazo-vencido { color: var(--neg); font-weight: 700; }
.gmao-plazo-hoy     { color: var(--warn); font-weight: 700; }

/* ── Dashboard en mosaico (js/vistas/dashboard/) ─────────────────────────
   Sin CSS propio: el motor y las piezas son del portal (shared/js/ui-mosaico.js y
   shared/css/ui.css, CONTRATO-UI B7.8), igual que en el resto de apps. */