/* Seguimiento y avance de obras · PROINCOL
 *
 * La cara sale de dos cosas del cliente:
 *   - el LOGO: azul noche #0A1730 y los naranjas #EB6226 / #F5A03D (sRGB,
 *     muestreados del PNG que mandaron);
 *   - su propio formato de informe (FMI017, «Informe semanal»): secciones
 *     numeradas, cajetín con los datos del contrato y cifras en tabla.
 *
 * Reglas de color que hay que defender:
 *   - El azul noche es la tinta y es LO EJECUTADO (la línea de la curva, el
 *     relleno de la regla).
 *   - El naranja marca EL TIEMPO: el «hoy» de la curva y el tiempo transcurrido
 *     de la regla. Y filetes de 1–2 px. Nunca un semáforo: un naranja de marca
 *     que también significara «cuidado» dejaría de significar las dos cosas.
 *   - Rojo SOLO para «atrasada». Lo que va bien no se pinta.
 */

:root {
  --tinta: #0A1730;
  --tinta-2: #2E3A4E;
  --gris: #5B6474;
  --gris-2: #8A93A3;
  --linea: #E2E5EA;
  --linea-2: #CDD2DA;
  --suave: #F5F6F8;
  --papel: #FFFFFF;
  --naranja: #EB6226;
  --naranja-2: #F5A03D;
  --rojo: #B42318;
  --rojo-suave: #FCEEEC;
  --programado: #7C8698;
  --titulo: 'Red Hat Display', 'Segoe UI', system-ui, sans-serif;
  --texto: 'Red Hat Text', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Red Hat Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --radio: 3px;
  --ancho: 1180px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 400 15px/1.5 var(--texto); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.mono, .cifra { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ la barra */

.barra {
  position: sticky; top: 0; z-index: 20; background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.barra__dentro { position: relative; }
.barra__dentro::after { /* el filete naranja bajo el logo, eco de la banda del logo */
  content: ''; position: absolute; left: 20px; bottom: -1px; width: 110px; height: 2px;
  background: linear-gradient(90deg, var(--naranja), var(--naranja-2));
}
.barra__dentro {
  max-width: var(--ancho); margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 20px; min-height: 58px;
}
.barra__logo { display: flex; align-items: center; text-decoration: none; }
.barra__logo img { height: 30px; width: auto; }
.barra__nav { display: flex; gap: 2px; margin-left: 8px; }
.barra__nav a {
  text-decoration: none; padding: 7px 12px; border-radius: var(--radio);
  color: var(--gris); font-weight: 500; font-size: 14px;
}
.barra__nav a:hover { color: var(--tinta); background: var(--suave); }
.barra__nav a.activo { color: var(--tinta); box-shadow: inset 0 -2px 0 var(--tinta); border-radius: 0; }
.barra__quien { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gris); }
.barra__quien b { color: var(--tinta); font-weight: 600; }
.barra__inicial {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tinta); color: #fff; font: 700 13px var(--titulo);
}
.menu { position: relative; }
.menu__boton { background: none; border: 0; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px; border-radius: var(--radio); }
.menu__boton:hover { background: var(--suave); }
.menu__lista {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: #fff;
  border: 1px solid var(--linea-2); border-radius: var(--radio); box-shadow: 0 10px 30px rgba(10, 23, 48, .12);
  padding: 6px; z-index: 30;
}
.menu__lista a, .menu__lista button {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none;
  text-decoration: none; font-size: 14px; border-radius: var(--radio); cursor: pointer; color: var(--tinta);
}
.menu__lista a:hover, .menu__lista button:hover { background: var(--suave); }
.menu__rol { padding: 8px 10px 10px; border-bottom: 1px solid var(--linea); margin-bottom: 4px; font-size: 12px; color: var(--gris); }
.menu__rol b { display: block; color: var(--tinta); font-size: 14px; }

/* ------------------------------------------------------------ página */

.pagina { max-width: var(--ancho); margin: 0 auto; padding: 28px 20px 80px; }
.cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cabeza h1, h1.titulo {
  font: 800 30px/1.1 var(--titulo); margin: 0; letter-spacing: -.01em;
}
.antetitulo {
  font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gris);
  margin-bottom: 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.antetitulo .ejemplo { color: var(--naranja); }
.bajada { color: var(--gris); margin: 6px 0 0; }

/* La sección numerada, como las de su formato: «1. Información general». */
.seccion { margin-top: 40px; }
.seccion:first-child { margin-top: 0; }
.seccion__tit {
  display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--linea);
}
.seccion__tit h2 { font: 700 13px/1.2 var(--titulo); letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.seccion__tit .num { font: 600 13px var(--mono); color: var(--naranja); }
.seccion__tit .acciones { margin-left: auto; display: flex; gap: 8px; }
.seccion__tit .pie-tit { margin-left: auto; font-size: 12px; color: var(--gris); }

.vacio { color: var(--gris); padding: 18px 0; font-size: 14px; }
.mini { font-size: 12.5px; color: var(--gris); }
.nota-ejemplo {
  border-left: 2px solid var(--naranja); padding: 8px 12px; font-size: 13px; color: var(--tinta-2);
  background: var(--suave); margin: 0 0 18px;
}

/* ------------------------------------------------------------ botones */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--tinta); background: var(--papel); color: var(--tinta);
  padding: 8px 14px; border-radius: var(--radio); font-weight: 600; font-size: 14px;
  cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1.2;
}
.btn:hover { background: var(--suave); }
.btn--principal { background: var(--tinta); color: #fff; }
.btn--principal:hover { background: #1B2B4D; }
.btn--plano { border-color: transparent; background: none; color: var(--tinta-2); }
.btn--plano:hover { background: var(--suave); }
.btn--chico { padding: 5px 10px; font-size: 13px; }
.btn--peligro { border-color: var(--rojo); color: var(--rojo); }
.btn--peligro:hover { background: var(--rojo-suave); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--ancho { width: 100%; }
.enlace { background: none; border: 0; padding: 0; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }

/* ------------------------------------------------------------ formularios */

.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > span, .rotulo {
  font: 600 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gris);
}
.campo input:not([type=checkbox]):not([type=radio]), .campo select, .campo textarea, .entrada input, .control {
  width: 100%; border: 1px solid var(--linea-2); border-radius: var(--radio); background: #fff;
  padding: 9px 11px; font-size: 15px; min-height: 40px;
}
.campo textarea { min-height: 84px; resize: vertical; line-height: 1.45; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .control:focus, .entrada input:focus {
  outline: 2px solid var(--tinta); outline-offset: -1px; border-color: var(--tinta);
}
.campo small { color: var(--gris); font-size: 12px; }
.rejilla { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla .ancho { grid-column: 1 / -1; }
.casilla { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.casilla input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--tinta); flex: none; }
.fila-acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.fila-acciones .derecha { margin-left: auto; }

/* ------------------------------------------------------------ tablas */

.tabla-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th {
  text-align: left; font: 600 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris); padding: 8px 10px; border-bottom: 1px solid var(--linea-2); white-space: nowrap;
}
.tabla td { padding: 10px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .der, .tabla th.der { text-align: right; }
.tabla .cifra { white-space: nowrap; }
.tabla tr.clic { cursor: pointer; }
.tabla tr.clic:hover td { background: var(--suave); }
.tabla tr.capitulo td { background: var(--suave); font-weight: 700; font-size: 13px; }
.tabla tfoot td { border-top: 1px solid var(--linea-2); font-weight: 700; }

/* ------------------------------------------------------------ etiquetas de estado */

.estado { font: 600 12px/1 var(--mono); letter-spacing: .02em; white-space: nowrap; }
.estado--atrasada { color: var(--rojo); }
.estado--adelantada { color: var(--tinta); }
.estado--normal { color: var(--gris); }
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--linea-2);
  border-radius: 999px; font: 600 11px/1.2 var(--mono); letter-spacing: .04em; color: var(--tinta-2); white-space: nowrap;
}
.chip--borrador { border-style: dashed; color: var(--gris); }
.chip--enviado { border-color: var(--tinta); color: var(--tinta); }
.chip--publicado { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.chip--alerta { border-color: var(--rojo); color: var(--rojo); }
.chip--naranja { border-color: var(--naranja); color: #B4441A; }
.desv--mal { color: var(--rojo); }

/* ------------------------------------------------------------ lista de obras */

.resumen-linea { display: flex; gap: 28px; flex-wrap: wrap; margin: 0 0 22px; }
.resumen-linea div { display: flex; flex-direction: column; }
.resumen-linea b { font: 700 26px/1.1 var(--mono); }
.resumen-linea span { font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.resumen-linea .mal b { color: var(--rojo); }

.obras-tabla td:first-child { width: 88px; }
.obras-tabla .obra-nombre b { display: block; font: 700 15px/1.25 var(--titulo); }
.obras-tabla .obra-nombre span { color: var(--gris); font-size: 13px; }
.barrita { width: 120px; height: 6px; background: var(--linea); position: relative; margin-top: 6px; }
.barrita i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tinta); }
.barrita em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--programado); }

.obras-tarjetas { display: none; }
.tarjeta-obra {
  display: block; text-decoration: none; border-top: 1px solid var(--linea); padding: 16px 0;
}
.tarjeta-obra:last-child { border-bottom: 1px solid var(--linea); }
.tarjeta-obra b { font: 700 17px/1.25 var(--titulo); display: block; }
.tarjeta-obra .mini { margin-top: 2px; }
.tarjeta-obra .cifras { display: flex; gap: 18px; margin-top: 10px; flex-wrap: wrap; }
.tarjeta-obra .cifras span { font-size: 12px; color: var(--gris); }
.tarjeta-obra .cifras b { font: 600 15px var(--mono); display: inline; }

/* ------------------------------------------------------------ obra: cabecera y cajetín */

.obra-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: start; }
.obra-cabeza__foto { aspect-ratio: 4 / 3; background: var(--suave); border: 1px solid var(--linea); overflow: hidden; }
.obra-cabeza__foto img { width: 100%; height: 100%; object-fit: cover; }
.obra-cabeza h1 { font: 800 32px/1.08 var(--titulo); margin: 0; letter-spacing: -.01em; }
.obra-cabeza--compacta { grid-template-columns: 1fr; }
.obra-cabeza--compacta h1 { font-size: 22px; }
.obra-cabeza .objeto { color: var(--tinta-2); margin: 10px 0 0; font-size: 14.5px; max-width: 72ch; }

/* El cajetín: los datos del contrato en celdas con filete, como el bloque de
   un plano o el «Contrato de obra (principal)» de su Excel. */
.cajetin {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--tinta); border-left: 1px solid var(--linea-2); margin-top: 20px;
}
.cajetin > div { border-right: 1px solid var(--linea-2); border-bottom: 1px solid var(--linea-2); padding: 8px 11px 9px; min-width: 0; }
.cajetin span { display: block; font: 600 10px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.cajetin b { display: block; font: 500 14px/1.35 var(--mono); margin-top: 4px; overflow-wrap: anywhere; }
.cajetin b.texto { font-family: var(--texto); font-weight: 600; }

.pestanas {
  display: flex; gap: 0; border-bottom: 1px solid var(--linea); margin: 26px 0 26px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a {
  text-decoration: none; padding: 10px 14px; font-weight: 600; font-size: 14px; color: var(--gris);
  white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; gap: 6px; align-items: center;
}
.pestanas a:hover { color: var(--tinta); }
.pestanas a.activo { color: var(--tinta); border-bottom-color: var(--tinta); }
.pestanas .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--naranja); }

/* ------------------------------------------------------------ avance: cifras, regla, curva */

.cifras-avance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--tinta); }
.cifras-avance > div { padding: 14px 16px 16px 0; border-bottom: 1px solid var(--linea); }
.cifras-avance > div + div { padding-left: 16px; border-left: 1px solid var(--linea); }
.cifras-avance span { display: block; font: 600 10.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.cifras-avance b { display: block; font: 600 38px/1.05 var(--mono); margin-top: 8px; letter-spacing: -.02em; }
.cifras-avance small { display: block; color: var(--gris); font-size: 12px; margin-top: 4px; }
.cifras-avance .mal b { color: var(--rojo); }

.lectura { margin: 16px 0 0; font: 600 18px/1.35 var(--titulo); max-width: 70ch; }
.lectura.mal { color: var(--rojo); }
.porque { margin: 8px 0 0; color: var(--tinta-2); max-width: 75ch; }
.porque b { font-weight: 700; }
.en-curso { margin-top: 10px; font-size: 13px; color: var(--gris); border-left: 2px dashed var(--linea-2); padding-left: 10px; }

/* La regla: una cinta de medir de 0 a 100 %. Lo ejecutado la rellena en azul
   noche; lo programado es la muesca gris de arriba; el tiempo transcurrido, la
   naranja de abajo. */
.regla { margin: 26px 0 8px; }
.regla svg { width: 100%; height: auto; display: block; overflow: visible; }
.regla .fondo { fill: var(--suave); stroke: var(--linea-2); }
.regla .lleno { fill: var(--tinta); }
.regla .marca { stroke: var(--linea-2); }
.regla .marca--mayor { stroke: var(--gris-2); }
.regla .num { font: 500 10px var(--mono); fill: var(--gris); }
.regla .prog { fill: var(--programado); }
.regla .tiempo { fill: var(--naranja); }
.regla .etq { font: 600 10.5px var(--mono); }
.regla .etq--prog { fill: var(--tinta-2); }
.regla .etq--tiempo { fill: #B4441A; }
.leyenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--gris); margin-top: 6px; }
.leyenda i { display: inline-block; width: 16px; height: 0; border-top: 3px solid var(--tinta); vertical-align: middle; margin-right: 6px; }
.leyenda i.l-prog { border-top: 2px dashed var(--programado); }
.leyenda i.l-ini { border-top: 2px dotted var(--gris-2); }
.leyenda i.l-hoy { border-top: 2px solid var(--naranja); width: 2px; height: 12px; border-top: 0; border-left: 2px solid var(--naranja); }
.leyenda i.l-borr { width: 10px; height: 10px; border: 2px dashed var(--tinta); border-radius: 50%; }
.leyenda i.l-tri { border: 0; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; }
.leyenda i.l-tri--prog { border-top: 8px solid var(--programado); }
.leyenda i.l-tri--tiempo { border-bottom: 8px solid var(--naranja); }

.curva svg { width: 100%; height: auto; display: block; }
.curva .rej { stroke: var(--linea); }
.curva .eje { font: 500 10.5px var(--mono); fill: var(--gris); }
.curva .programado { fill: none; stroke: var(--programado); stroke-width: 2; stroke-dasharray: 6 5; }
.curva .inicial { fill: none; stroke: var(--gris-2); stroke-width: 1.5; stroke-dasharray: 2 4; }
.curva .ejecutado { fill: none; stroke: var(--tinta); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.curva .area { fill: var(--tinta); opacity: .06; }
.curva .punto { fill: #fff; stroke: var(--tinta); stroke-width: 2.5; }
.curva .borrador { fill: #fff; stroke: var(--tinta); stroke-width: 2; stroke-dasharray: 3 2; }
.curva .hoy { stroke: var(--naranja); stroke-width: 1.5; }
.curva .hoy-t { font: 600 10.5px var(--mono); fill: #B4441A; }

/* ------------------------------------------------------------ bloques de dos columnas */

.dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }

/* El checklist */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linea); align-items: start; }
.checklist li:last-child { border-bottom: 0; }
.checklist .marca-est { width: 20px; height: 20px; border: 1.5px solid var(--tinta); border-radius: 2px; display: grid; place-items: center; margin-top: 1px; font: 700 13px/1 var(--texto); }
.checklist .marca-est.terminada { background: var(--tinta); color: #fff; }
.checklist .marca-est.en_ejecucion { background: linear-gradient(90deg, var(--tinta) 50%, #fff 50%); }
.checklist .marca-est.pendiente { border-color: var(--gris-2); }
.checklist .marca-est.proyectada { border-radius: 50%; border-color: var(--gris-2); width: 9px; height: 9px; margin: 6px 0 0 5px; background: var(--gris-2); border: 0; }
.checklist .t { font-size: 14.5px; }
.checklist .m { font-size: 12px; color: var(--gris); margin-top: 2px; }
.checklist .pend .t { color: var(--gris); }

/* Galería */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.galeria figure { margin: 0; cursor: zoom-in; }
.galeria .marco { aspect-ratio: 4 / 3; background: var(--suave); overflow: hidden; border: 1px solid var(--linea); }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.galeria figure:hover img { transform: scale(1.03); }
.galeria figcaption { font-size: 12.5px; line-height: 1.35; margin-top: 6px; color: var(--tinta-2); }
.galeria figcaption .mini { display: block; margin-top: 2px; }

.visor { position: fixed; inset: 0; background: rgba(6, 12, 26, .92); z-index: 60; display: grid; grid-template-rows: 1fr auto; padding: 20px; }
.visor img { max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; }
.visor__pie { color: #fff; text-align: center; padding: 12px; font-size: 14px; }
.visor__pie .mini { color: #aab; }
.visor__cerrar { position: absolute; top: 14px; right: 14px; background: none; border: 1px solid #fff5; color: #fff; border-radius: var(--radio); padding: 6px 12px; cursor: pointer; }
.visor__ir { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 1px solid #fff5; color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 20px; }
.visor__ir--ant { left: 14px; }
.visor__ir--sig { right: 14px; }

/* Lista de informes */
.informes-lista { list-style: none; margin: 0; padding: 0; }
.informes-lista li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.informes-lista .n { font: 700 24px/1 var(--mono); }
.informes-lista .n small { display: block; font: 600 9.5px var(--mono); letter-spacing: .1em; color: var(--gris); margin-top: 3px; }
.informes-lista .acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Plata */
.barras-plata { display: flex; flex-direction: column; gap: 14px; }
.barra-plata .r { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.barra-plata .r b { font-family: var(--mono); font-weight: 600; }
.barra-plata .pista { height: 8px; background: var(--suave); margin-top: 5px; position: relative; }
.barra-plata .pista i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tinta); }
.barra-plata .pista i.claro { background: var(--gris-2); }
.barra-plata .pista i.hueco { background: none; border: 1.5px solid var(--tinta); }

/* ------------------------------------------------------------ Hoy en obra */

.dia-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dia-nav input[type=date] { border: 1px solid var(--linea-2); border-radius: var(--radio); padding: 7px 10px; font-family: var(--mono); }
.aviso { border: 1px solid var(--linea-2); border-left: 3px solid var(--tinta); padding: 12px 14px; margin: 0 0 20px; font-size: 14px; background: #fff; }
.aviso--mal { border-left-color: var(--rojo); background: var(--rojo-suave); }
.aviso--naranja { border-left-color: var(--naranja); }
.aviso b { display: block; margin-bottom: 2px; }

.lista-reg { list-style: none; margin: 0; padding: 0; }
.lista-reg li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.lista-reg li:last-child { border-bottom: 0; }
.lista-reg .cuerpo { flex: 1; min-width: 0; }
.lista-reg .cuerpo .m { font-size: 12px; color: var(--gris); margin-top: 2px; }
.lista-reg .acc { display: flex; gap: 4px; flex: none; }

/* El chulo de tres estados: se toca y rota. */
.chulo {
  flex: none; display: flex; border: 1px solid var(--linea-2); border-radius: var(--radio); overflow: hidden;
}
.chulo button { border: 0; background: #fff; padding: 7px 9px; font: 600 12px var(--mono); color: var(--gris); cursor: pointer; min-width: 38px; }
.chulo button + button { border-left: 1px solid var(--linea-2); }
.chulo button.si { background: var(--tinta); color: #fff; }
.chulo button:disabled { cursor: default; }

.alta { display: grid; gap: 10px; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto; align-items: end; margin-top: 12px; padding-top: 14px; border-top: 1px dashed var(--linea-2); }
.alta--cant { grid-template-columns: minmax(0, 2fr) 130px minmax(0, 1.2fr) auto; }
.alta--nov { grid-template-columns: 150px minmax(0, 1fr) auto; }
.alta .casilla { grid-column: 1 / -1; font-size: 13px; color: var(--tinta-2); }
.falta { font: 500 12px var(--mono); color: var(--gris); }
.subir-fotos { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.fotos-reg { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.fotos-reg figure { margin: 0; }
.fotos-reg .marco { aspect-ratio: 4 / 3; background: var(--suave); overflow: hidden; }
.fotos-reg img { width: 100%; height: 100%; object-fit: cover; }
.fotos-reg textarea { width: 100%; font-size: 13px; border: 1px solid var(--linea-2); border-radius: var(--radio); padding: 6px 8px; min-height: 52px; margin-top: 6px; resize: vertical; }
.fotos-reg .pie { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 4px; }

.cierre { border-top: 1px solid var(--tinta); padding-top: 18px; }

/* ------------------------------------------------------------ modal y aviso flotante */

.capa { position: fixed; inset: 0; background: rgba(10, 23, 48, .42); z-index: 50; display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.modal { background: #fff; width: min(640px, 100%); border-radius: var(--radio); box-shadow: 0 24px 60px rgba(10, 23, 48, .28); max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.modal--ancho { width: min(980px, 100%); }
.modal__cab { padding: 18px 22px 12px; border-bottom: 1px solid var(--linea); display: flex; align-items: center; gap: 10px; }
.modal__cab h3 { margin: 0; font: 700 18px var(--titulo); }
.modal__cab .x { margin-left: auto; }
.modal__cuerpo { padding: 18px 22px; overflow-y: auto; }
.modal__pie { padding: 12px 22px 18px; border-top: 1px solid var(--linea); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.modal__error { color: var(--rojo); font-size: 13.5px; margin-right: auto; align-self: center; }

.nota { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--tinta); color: #fff; padding: 11px 16px; border-radius: var(--radio); z-index: 70; font-size: 14px; max-width: calc(100% - 32px); box-shadow: 0 10px 30px rgba(10, 23, 48, .25); }
.nota--mal { background: var(--rojo); }

.cargando { padding: 60px 0; text-align: center; color: var(--gris); font: 500 13px var(--mono); letter-spacing: .08em; }

/* ------------------------------------------------------------ entrada */

.entrada { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.entrada__lado {
  background: var(--tinta); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; overflow: hidden;
}
.entrada__lado img { position: absolute; right: -40px; top: 40px; width: 420px; height: auto; }
.entrada__lado h2 { font: 800 34px/1.1 var(--titulo); margin: 0; max-width: 16ch; position: relative; }
.entrada__lado p { color: #B9C2D3; max-width: 44ch; position: relative; margin: 14px 0 0; }
.entrada__caja { display: flex; flex-direction: column; justify-content: center; padding: 48px; max-width: 480px; width: 100%; margin: 0 auto; gap: 12px; }
.entrada__caja img { width: 220px; height: auto; margin-bottom: 18px; }
.entrada__caja h1 { font: 800 26px var(--titulo); margin: 0; }
.entrada__caja p { color: var(--gris); margin: 0 0 8px; }
.entrada__error { color: var(--rojo); font-size: 14px; min-height: 20px; }

/* ------------------------------------------------------------ el informe (pantalla y PDF) */

.informe-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.informe-barra .derecha { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.hoja { border: 1px solid var(--linea-2); padding: 28px 32px 36px; background: #fff; }
.hoja__cab { display: grid; grid-template-columns: 200px minmax(0, 1fr) 210px; border: 1px solid var(--tinta); }
.hoja__cab > div { padding: 10px 12px; }
.hoja__cab .logo { border-right: 1px solid var(--tinta); display: grid; place-items: center; }
.hoja__cab .logo img { max-height: 46px; width: auto; }
.hoja__cab .centro { text-align: center; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--tinta); }
.hoja__cab .centro b { font: 800 18px var(--titulo); letter-spacing: .04em; }
.hoja__cab .centro span { font: 600 11px var(--mono); letter-spacing: .12em; color: var(--gris); margin-top: 4px; }
.hoja__cab .codigo { font: 500 11px/1.7 var(--mono); }
.hoja__cab .codigo b { font-weight: 600; }
.hoja__num { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 18px 0 4px; }
.hoja__num h1 { font: 800 26px var(--titulo); margin: 0; }
.hoja__num h1 span { font-family: var(--mono); }
.hoja__num .periodo { font: 500 14px var(--mono); }
.hoja .seccion { margin-top: 26px; }
.hoja .seccion__tit { border-bottom-color: var(--tinta); }
.tabla-ficha { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla-ficha th { text-align: left; width: 30%; font: 600 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); padding: 7px 10px 7px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla-ficha td { padding: 7px 0; border-bottom: 1px solid var(--linea); }
.dias { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dias th { font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--tinta); }
.dias td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.dias td.dia { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; width: 100px; color: var(--tinta-2); }
.dias ul { margin: 0; padding-left: 16px; }
.firma { margin-top: 34px; display: flex; justify-content: flex-end; }
.firma div { width: 300px; border-top: 1px solid var(--tinta); padding-top: 8px; font-size: 13px; }
.firma b { display: block; font: 700 14px var(--titulo); }
.galeria--informe { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ------------------------------------------------------------ editor de presupuesto */

.editor-tabla input { width: 100%; border: 1px solid transparent; background: transparent; padding: 6px 7px; font-size: 13.5px; border-radius: 2px; }
.editor-tabla input:focus { border-color: var(--tinta); background: #fff; outline: 0; }
.editor-tabla td { padding: 2px 4px; border-bottom: 1px solid var(--linea); }
.editor-tabla td.num input { text-align: right; font-family: var(--mono); }
.editor-tabla tr:hover td { background: var(--suave); }
.pegar textarea { font: 12.5px/1.45 var(--mono); min-height: 150px; }

/* ------------------------------------------------------------ historial */

.historial { list-style: none; margin: 0; padding: 0; }
.historial li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.historial .cuando { font: 500 12px var(--mono); color: var(--gris); }
.historial .quien { font-size: 12.5px; color: var(--gris); }
.historial .cambio { margin-top: 4px; font: 500 12.5px var(--mono); }
.historial .cambio del { color: var(--gris); }
.historial .cambio ins { text-decoration: none; font-weight: 600; }

/* ------------------------------------------------------------ celular */

/* Las gráficas se dibujan dos veces: ancha y angosta. */
.solo-angosto { display: none; }

@media (max-width: 900px) {
  .obra-cabeza { grid-template-columns: 1fr; }
  .obra-cabeza__foto { max-width: 420px; order: -1; aspect-ratio: 16 / 9; }
  .cajetin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dos, .tres { grid-template-columns: 1fr; gap: 8px; }
  .cifras-avance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras-avance > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .obras-tabla { display: none; }
  .obras-tarjetas { display: block; }
  .entrada { grid-template-columns: 1fr; }
  .entrada__lado { display: none; }
  .hoja__cab { grid-template-columns: 1fr; }
  .hoja__cab .logo, .hoja__cab .centro { border-right: 0; border-bottom: 1px solid var(--tinta); }
  .galeria--informe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .solo-ancho { display: none; }
  .solo-angosto { display: block; }
  .pagina { padding: 18px 16px 70px; }
  .barra__dentro { padding: 8px 16px; gap: 10px; }
  .barra__dentro::after { left: 16px; width: 94px; }
  .barra__nav { display: none; }
  .barra__quien .nombre-largo { display: none; }
  .barra__logo img { height: 26px; }
  .cabeza h1, h1.titulo, .obra-cabeza h1 { font-size: 25px; }
  .cifras-avance b { font-size: 29px; }
  .rejilla, .rejilla--2 { grid-template-columns: 1fr; }
  .alta, .alta--cant, .alta--nov { grid-template-columns: 1fr; }
  /* El texto de la actividad arriba, a todo el ancho; el chulo y los botones debajo. */
  .lista-reg li { flex-wrap: wrap; row-gap: 8px; }
  .lista-reg li:has(.chulo) .cuerpo { flex-basis: 100%; }
  .lista-reg .chulo { flex: 1; }
  .lista-reg .chulo button { flex: 1; padding: 9px 6px; }
  .obra-cabeza--compacta h1 { font-size: 20px; }
  .obra-cabeza .objeto { display: none; }   /* está en el informe; en el celular primero van las cifras */
  .pestanas { margin: 16px 0 18px; }
  .informes-lista li { grid-template-columns: 48px minmax(0, 1fr); }
  .informes-lista .acciones { grid-column: 1 / -1; justify-content: flex-start; }
  .historial li { grid-template-columns: 1fr; gap: 2px; }
  .hoja { padding: 16px; border: 0; }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lectura { font-size: 16px; }
  .modal__cuerpo { padding: 16px; }
}

/* ------------------------------------------------------------ impresión (el PDF) */

@page { size: letter; margin: 11mm 11mm 13mm; }
@media print {
  /* La hoja carta mide unos 720 px: sin esto caería en el diseño de celular. */
  body { font-size: 10.5px; }
  .barra, .informe-barra, .no-imprimir, .pestanas, .nota, .solo-angosto { display: none !important; }
  .solo-ancho { display: block !important; }
  .pagina { max-width: none; padding: 0; }
  .hoja { border: 0; padding: 0; }
  .hoja__cab { grid-template-columns: 160px minmax(0, 1fr) 180px; }
  .hoja__cab .logo, .hoja__cab .centro { border-right: 1px solid var(--tinta); border-bottom: 0; }
  .hoja__cab .logo img { max-height: 38px; }
  .hoja__cab .centro b { font-size: 15px; }
  .hoja__num { margin-top: 12px; }
  .hoja__num h1 { font-size: 19px; }
  .hoja__num .periodo { font-size: 11px; }
  .hoja .seccion { margin-top: 16px; }
  .seccion__tit { break-after: avoid; margin-bottom: 8px; padding-bottom: 5px; }
  .seccion__tit h2 { font-size: 11px; }
  .dos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .tabla-caja { overflow: visible; }
  table.tabla { font-size: 10px; }
  .tabla th { font-size: 8px; padding: 4px 5px; letter-spacing: .06em; }
  .tabla td { padding: 4px 5px; }
  .tabla-ficha { font-size: 10.5px; }
  .tabla-ficha th { font-size: 8.5px; padding: 4px 8px 4px 0; }
  .tabla-ficha td { padding: 4px 0; }
  .dias { font-size: 10.5px; }
  .dias td { padding: 4px 8px 4px 0; }
  .lectura { font-size: 13px; margin-top: 10px; }
  .porque, .mini { font-size: 10px; }
  /* Lo que no se parte: filas, la curva, cada foto y la firma. Las secciones sí. */
  .tabla tr, .tabla-ficha tr, .dias tr, .galeria figure, .curva, .firma, .cifras-avance, .hoja__cab { break-inside: avoid; }
  .galeria--informe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .galeria img { transform: none !important; }
  .curva svg { max-height: 230px; }
  .firma { margin-top: 20px; }
  a { text-decoration: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}