/* ---- tipografía autoalojada (Poppins, igual familia que usaba la marca) ---- */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/poppins-800.woff2") format("woff2");
}
/* ---- cursiva manuscrita para el eslogan de marca (ver .brand-tagline,
   .footer-tagline, .login-tagline) — jamás para texto de lectura ---- */
@font-face {
  font-family: "Alex Brush";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/alex-brush-400.woff2") format("woff2");
}

:root {
  --cinco-navy: #1f2732;
  --cinco-navy-dark: #12161d;
  --cinco-navy-soft: #2a3441;
  --cinco-amber: #feb209;
  --cinco-amber-dark: #d99400;
  --bg: #f5f6f8;
  --card-bg: #ffffff;
  --text: #1c1f24;
  --text-muted: #5c6570;
  --border: #e3e6ea;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(18, 22, 29, 0.09);
  --shadow-lg: 0 24px 48px rgba(18, 22, 29, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171b;
    --card-bg: #1c2027;
    --text: #eef0f2;
    --text-muted: #9aa2ad;
    --border: #2c313a;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 15.5px;
}

h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; margin: 0; }

a { color: var(--cinco-amber-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cinco-amber-dark);
  margin-bottom: 10px;
}

/* ---- animación de entrada al hacer scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---- encabezado / navegación (estilo "glass" flotante) ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(31, 39, 50, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 40px; width: auto; }
/* Eslogan de marca ("Hacerlo mejor es nuestro reto"), en cursiva manuscrita
   junto al logo — autoalojada igual que Poppins, un solo peso porque solo
   se usa en este trazo decorativo, nunca en texto de lectura. */
.brand-tagline {
  font-family: "Alex Brush", cursive;
  font-size: 23px;
  line-height: 1;
  color: #b7bcc4;
  padding-left: 14px;
  margin-left: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .brand-tagline { display: none; }
}
/* En las páginas de Control de Contratos el menú (.control-userbar) es
   mucho más ancho que el nav público (varios enlaces + correo + botón de
   cerrar sesión) — el eslogan cursivo, puramente decorativo, no cabe ahí
   sin desbordarse sobre el correo del usuario (se veían encimados). Se
   oculta apenas el encabezado tenga un .control-userbar, sin tocar el
   sitio público. */
.site-header:has(.control-userbar) .brand-tagline { display: none; }
.login-tagline {
  font-family: "Alex Brush", cursive;
  font-size: 27px;
  color: #8a8a8a;
  text-align: center;
  margin-top: 20px;
}
nav.main-nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav.main-nav a {
  color: #dfe3e8;
  font-weight: 600;
  font-size: 13.5px;
  padding: 9px 16px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
nav.main-nav a:hover,
nav.main-nav a.active {
  background: var(--cinco-amber);
  color: var(--cinco-navy-dark);
  text-decoration: none;
}
#navToggle {
  display: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 18px;
}

@media (max-width: 760px) {
  #navToggle { display: block; }
  nav.main-nav {
    display: none;
    flex-direction: column;
    width: 100%;
    padding-bottom: 10px;
  }
  nav.main-nav.open { display: flex; }
  nav.main-nav a { border-radius: 8px; }
  .site-header .container { flex-wrap: wrap; }
}

/* ---- hero de portada: imagen completa + degradado + contenido flotante ---- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: #fff;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 22, 29, 0.55) 0%, rgba(18, 22, 29, 0.75) 55%, rgba(18, 22, 29, 0.96) 100%),
    linear-gradient(100deg, rgba(18, 22, 29, 0.92) 10%, rgba(18, 22, 29, 0.35) 65%);
  z-index: -1;
}
.hero-home { background-image: url("../img/servicio-construccion.jpg"); }
.hero-content { max-width: 620px; padding: 120px 0 90px; }
.hero-content .eyebrow { color: var(--cinco-amber); }
.hero h1 {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  margin-bottom: 18px;
  letter-spacing: -0.5px;
}
.hero p.lead-text {
  color: #d7dbe1;
  font-size: 17px;
  max-width: 520px;
  margin-bottom: 30px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-outline {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.1); text-decoration: none; }

/* ---- franja de estadísticas, flotando sobre el borde del hero ---- */
.stats-strip {
  position: relative;
  z-index: 2;
  margin-top: -64px;
}
.stats-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  overflow: hidden;
}
.stat-item {
  text-align: center;
  padding: 26px 16px;
  border-right: 1px solid var(--border);
}
.stat-item:last-child { border-right: none; }
.stat-item .stat-number {
  font-size: 30px;
  font-weight: 800;
  color: var(--cinco-navy);
  display: block;
}
@media (prefers-color-scheme: dark) { .stat-item .stat-number { color: #fff; } }
.stat-item .stat-label {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 600;
}
@media (max-width: 620px) {
  .stat-item { border-right: none; border-bottom: 1px solid var(--border); }
  .stat-item:last-child { border-bottom: none; }
}

/* ---- banner interno para páginas que no son Inicio ---- */
.page-banner {
  background: linear-gradient(120deg, var(--cinco-navy) 0%, var(--cinco-navy-dark) 100%);
  color: #fff;
  padding: 68px 0 54px;
  text-align: center;
}
.page-banner .eyebrow { color: var(--cinco-amber); }
.page-banner h1 { font-size: clamp(26px, 4vw, 36px); }
.page-banner p { color: #c7ccd3; max-width: 600px; margin: 10px auto 0; font-size: 14.5px; }

/* ---- secciones ---- */
.section { padding: 80px 0; }
.section-tight { padding: 56px 0; }
.section-dark {
  background: var(--cinco-navy);
  color: #fff;
}
.section-dark .text-muted, .section-dark p { color: #c7ccd3; }
.section-header { text-align: center; max-width: 680px; margin: 0 auto 46px; }
.section-header h2 { font-size: clamp(24px, 3.2vw, 32px); color: var(--cinco-navy); }
.section-dark .section-header h2 { color: #fff; }
@media (prefers-color-scheme: dark) { .section-header h2 { color: #fff; } }
.section-header p { color: var(--text-muted); font-size: 15px; margin-top: 10px; }

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  margin-bottom: 22px;
}

/* ---- video institucional (Inicio) ---- */
.video-frame {
  max-width: 860px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.video-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  object-fit: contain;
}

/* ---- logos de clientes (Inicio): grid en escala de grises que se
   colorea al pasar el mouse, para reforzar confianza sin competir con
   la paleta navy/ámbar del resto del sitio. ---- */
.clientes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 18px;
}
.cliente-logo {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  padding: 16px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cliente-logo img {
  max-width: 100%;
  max-height: 60px;
  object-fit: contain;
  filter: grayscale(1) opacity(0.7);
  transition: filter 0.25s ease;
}
.cliente-logo:hover img { filter: grayscale(0) opacity(1); }

/* ---- tarjetas de servicio (Inicio) ---- */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
}
.grid-cards-wide { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Fuerza 4 columnas parejas en pantallas anchas (ej. las 4 tarjetas de
   Conecta) en vez de dejar que la 4ª baje a una fila aparte. */
.grid-cards-4 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (min-width: 900px) {
  .grid-cards-4 { grid-template-columns: repeat(4, 1fr); }
}
/* Variante flex (Servicios en Inicio: 7 tarjetas) — a diferencia de grid,
   centra la última fila incompleta en vez de dejarla pegada a la
   izquierda con un hueco asimétrico. */
.grid-cards.grid-cards-flex-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.grid-cards.grid-cards-flex-center > .service-card {
  flex: 1 1 240px;
  max-width: 280px;
}
.service-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.service-card .service-card-media { overflow: hidden; height: 180px; }
.service-card img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.service-card:hover img { transform: scale(1.08); }
.service-card .service-card-body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.service-card h3 { font-size: 15.5px; color: var(--cinco-navy); margin-bottom: 10px; }
@media (prefers-color-scheme: dark) { .service-card h3 { color: #fff; } }
.service-card p { font-size: 13.5px; color: var(--text-muted); flex: 1; margin: 0 0 16px; }
.link-arrow {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--cinco-amber-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.link-arrow::after { content: "\2192"; transition: transform 0.2s ease; }
.link-arrow:hover::after { transform: translateX(4px); }

/* Insignia "Línea 0X" con el mismo lenguaje visual de los botones de
   acordeón del panel interno (degradado navy/ámbar, textura achurada,
   relieve 3D) — reemplaza el texto plano en ámbar. */
.linea-badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  margin-bottom: 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--cinco-amber);
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(254, 178, 9, 0.14) 0 8px, rgba(254, 178, 9, 0) 8px 16px),
    linear-gradient(135deg, var(--cinco-navy) 0%, var(--cinco-navy-dark) 100%);
  box-shadow:
    0 6px 14px rgba(18, 22, 29, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -2px 5px rgba(0, 0, 0, 0.32);
}
.linea-badge::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cinco-amber-dark), var(--cinco-amber), var(--cinco-amber-dark));
}

/* ---- acordeón de servicios (página Servicios): 6 franjas verticales que
   se expanden con el mouse (o con un toque en celular) revelando la
   descripción completa, en vez de un zigzag estático de foto/texto. ---- */
.servicios-acordeon-hint { color: var(--text-muted); font-size: 13.5px; margin: 0 0 20px; text-align: center; }

.servicios-acordeon {
  display: flex;
  gap: 8px;
  height: 520px;
  margin-bottom: 0;
}
.servicio-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 70px;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: flex-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.servicio-panel:hover,
.servicio-panel.activo { flex-grow: 6; }

.servicio-panel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.servicio-panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(18, 22, 29, 0.94) 0%, rgba(18, 22, 29, 0.55) 45%, rgba(18, 22, 29, 0.22) 100%);
  transition: opacity 0.4s ease;
}
.servicio-panel-numero {
  position: absolute;
  top: 18px;
  right: 20px;
  font-size: 44px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.22);
  line-height: 1;
  transition: opacity 0.4s ease;
}
.servicio-panel:hover .servicio-panel-numero,
.servicio-panel.activo .servicio-panel-numero { opacity: 0.14; }

.servicio-panel-contenido {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 22px;
  color: #fff;
}
.servicio-panel-contenido .linea-badge {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.servicio-panel-contenido h3 {
  font-size: 17px;
  margin: 10px 0 8px;
  max-width: 420px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease 0.05s, transform 0.4s ease 0.05s;
}
.servicio-panel-contenido p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 420px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}
.servicio-panel:hover .servicio-panel-contenido .linea-badge,
.servicio-panel:hover .servicio-panel-contenido h3,
.servicio-panel:hover .servicio-panel-contenido p,
.servicio-panel.activo .servicio-panel-contenido .linea-badge,
.servicio-panel.activo .servicio-panel-contenido h3,
.servicio-panel.activo .servicio-panel-contenido p {
  opacity: 1;
  transform: none;
}

@media (max-width: 760px) {
  .servicios-acordeon { flex-direction: column; height: auto; gap: 10px; }
  .servicio-panel { flex: none; height: 92px; transition: height 0.5s ease; }
  .servicio-panel:hover,
  .servicio-panel.activo { flex-grow: 0; height: 320px; }
  .servicio-panel-contenido h3 { font-size: 16px; max-width: none; }
  .servicio-panel-contenido p { max-width: none; }
}

.btn {
  display: inline-block;
  background: var(--cinco-amber);
  color: var(--cinco-navy-dark);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn:hover { background: var(--cinco-amber-dark); text-decoration: none; transform: translateY(-1px); }

/* ---- franja de llamado a la acción (CTA) ---- */
.cta-band {
  background: linear-gradient(120deg, var(--cinco-navy) 0%, var(--cinco-navy-soft) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 44px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-band h3 { font-size: clamp(19px, 2.6vw, 26px); margin-bottom: 8px; }
.cta-band p { color: #c7ccd3; margin: 0; font-size: 14.5px; }

/* ---- Misión/Visión con ícono y aparición escalonada (Corporativo) ---- */
.mv-card { position: relative; overflow: hidden; }
.mv-card-icono { display: block; margin-bottom: 10px; }
.mv-card-icono img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; border: 3px solid var(--cinco-amber); box-shadow: var(--shadow); }
.grid-cards-wide .mv-card:nth-child(2) { transition-delay: 0.15s; }

/* ---- valores como cuadrícula de tarjetas con ícono (Corporativo) ---- */
.valores-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 18px; }
.valor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 22px 14px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--border);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.valor-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(254, 178, 9, 0.4); }
.valor-icono img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 3px solid var(--cinco-amber); box-shadow: var(--shadow); }
.valor-nombre { font-size: 13.5px; font-weight: 600; color: var(--text); }

/* ---- galería "Nuestra historia en imágenes" (Corporativo) ---- */
/* masonry sin JS: columns intenta 4, pero nunca más angosto que 220px por
   columna, así que en pantallas chicas baja sola a 2-3-1 columnas. */
.stats-card-standalone + .section-header { margin-top: 48px; }
.historia-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.historia-filtro {
  border: 1px solid rgba(31, 39, 50, 0.18); background: #fff; color: var(--cinco-navy);
  border-radius: 999px; padding: 7px 16px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.historia-filtro:hover { border-color: var(--cinco-amber); }
.historia-filtro.activo { background: var(--cinco-navy); border-color: var(--cinco-navy); color: #fff; }
@media (prefers-color-scheme: dark) {
  .historia-filtro { background: var(--cinco-navy-soft); color: #fff; border-color: rgba(255, 255, 255, 0.18); }
}
.historia-galeria { columns: 4 220px; column-gap: 14px; margin-top: 8px; }
.historia-item[hidden] { display: none; }
.historia-galeria + .cta-band { margin: 40px 0 12px; }
.historia-item {
  display: block; width: 100%; margin: 0 0 14px; break-inside: avoid;
  border: none; background: none; padding: 0; cursor: pointer;
  border-radius: var(--radius); overflow: hidden; position: relative;
  box-shadow: var(--shadow);
}
.historia-item img { display: block; width: 100%; height: auto; transition: transform 0.35s ease; }
.historia-item:hover img { transform: scale(1.06); }
.historia-item::after {
  content: "\26A1"; position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(18, 22, 29, 0.55); color: var(--cinco-amber);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; opacity: 0; transition: opacity 0.25s ease;
}
.historia-item:hover::after { opacity: 1; }

.historia-lightbox {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(10, 12, 15, 0.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.historia-lightbox.abierta { opacity: 1; pointer-events: auto; }
.historia-lightbox img {
  max-width: 88vw; max-height: 82vh; border-radius: 10px; box-shadow: var(--shadow-lg);
}
.historia-lightbox-cerrar,
.historia-lightbox-anterior,
.historia-lightbox-siguiente {
  position: absolute; border: none; background: rgba(255, 255, 255, 0.12);
  color: #fff; cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; transition: background 0.2s ease;
}
.historia-lightbox-cerrar:hover,
.historia-lightbox-anterior:hover,
.historia-lightbox-siguiente:hover { background: rgba(255, 255, 255, 0.25); }
.historia-lightbox-cerrar { top: 20px; right: 24px; width: 42px; height: 42px; }
.historia-lightbox-anterior,
.historia-lightbox-siguiente { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; }
.historia-lightbox-anterior { left: 16px; }
.historia-lightbox-siguiente { right: 16px; }
@media (max-width: 640px) {
  .historia-lightbox-anterior, .historia-lightbox-siguiente { width: 40px; height: 40px; font-size: 16px; }
}

/* Franja de cifras reutilizando .stats-card (Inicio) pero sin el margen
   negativo pensado para flotar sobre el hero — aquí va en flujo normal. */
.stats-card.stats-card-standalone { margin: 4px 0 8px; }

/* ---- acordeón de política/objetivos/alcance SGI-HSEQ (Corporativo):
   mismo lenguaje visual navy/ámbar con textura y relieve 3D que
   .linea-badge, para no dejar la política como un muro de texto plano. ---- */
.acordeon-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  border: none;
  border-radius: calc(var(--radius) - 4px);
  padding: 16px 20px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: #fff;
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(254, 178, 9, 0.14) 0 10px, rgba(254, 178, 9, 0) 10px 20px),
    linear-gradient(135deg, var(--cinco-navy) 0%, var(--cinco-navy-dark) 100%);
  box-shadow:
    0 10px 22px rgba(18, 22, 29, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -3px 8px rgba(0, 0, 0, 0.32);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.acordeon-trigger::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cinco-amber-dark), var(--cinco-amber), var(--cinco-amber-dark));
}
.acordeon-trigger:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 28px rgba(18, 22, 29, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -3px 8px rgba(0, 0, 0, 0.32);
}
.acordeon-trigger-icono { display: flex; flex-shrink: 0; }
.acordeon-trigger-icono img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cinco-amber); }
.acordeon-trigger-label { flex: 1; font-weight: 700; font-size: 15px; }
.acordeon-trigger-chevron { font-size: 13px; color: var(--cinco-amber); transition: transform 0.25s ease; flex-shrink: 0; }
.acordeon-item.abierto .acordeon-trigger-chevron { transform: rotate(180deg); }

.acordeon-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; }
.acordeon-panel-inner { overflow: hidden; }
.acordeon-item.abierto .acordeon-panel { grid-template-rows: 1fr; }
.acordeon-item.abierto .acordeon-panel-inner { margin-top: 20px; }

/* ---- listas limpias con check (Objetivos SGI, etc.) ---- */
ul.clean-list { padding-left: 0; list-style: none; margin: 0; }
ul.clean-list li {
  padding: 10px 0 10px 28px;
  position: relative;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
  /* Explícito, no heredado: dentro de .card (fondo siempre claro/--card-bg)
     el texto debe leerse aunque la sección que envuelve la tarjeta sea
     .section-dark (que pone color:#fff en toda la sección) — sin esto, el
     texto quedaba blanco sobre blanco. */
  color: var(--text-muted);
}
ul.clean-list li:last-child { border-bottom: none; }
ul.clean-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--cinco-amber-dark);
  font-weight: 700;
}

/* ---- aplicativos ---- */
.app-card { text-align: center; }
.app-card .icon {
  font-size: 30px;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(254, 178, 9, 0.14);
  border-radius: 18px;
}
/* Variante con foto real en vez de emoji (Conecta) — círculo con borde
   ámbar, mismo lenguaje visual que Misión/Visión/Valores en Corporativo. */
.app-card .icon.icon-foto { background: none; padding: 0; }
.app-card .icon.icon-foto img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--cinco-amber);
  box-shadow: var(--shadow);
}
.app-card p { font-size: 13.5px; color: var(--text-muted); margin-bottom: 18px; }
.app-card-link { margin: 12px 0 0; }
.app-card .note {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 10px;
}
/* Variante de .icon con un número en vez de emoji (pasos de un proceso) */
.icon-num { font-weight: 800; color: var(--cinco-navy); }
@media (prefers-color-scheme: dark) { .icon-num { color: #fff; } }

/* ---- landing de aplicativo (Copropiedad Saludable): intro con imagen a
   un lado, mismo lenguaje visual (tarjetas/tokens) que el resto del sitio ---- */
.app-hero { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.app-hero-texto { flex: 1 1 360px; }
.app-hero-texto p { color: var(--text-muted); font-size: 15px; margin: 14px 0 22px; }
.app-hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.app-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow);
}
.app-hero-img { flex: 1 1 300px; max-width: 380px; margin: 0 auto; }
.app-hero-img img { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
/* Variante: un .stat-item como "columna" de un .app-hero (cifra + texto) */
.app-hero > .stat-item { flex: 1 1 220px; padding: 0; }
/* Espaciado consistente cuando uno de estos bloques va justo bajo un
   .eyebrow dentro de una tarjeta (secciones "Lo que la hace diferente") */
.card > .eyebrow + .grid-cards,
.card > .eyebrow + .stats-card,
.card > .eyebrow + .app-hero { margin-top: 18px; }
/* Nota aclaratoria pequeña, centrada, bajo un panel ilustrativo */
.nota-centrada { text-align: center; color: var(--text-muted); font-size: 13px; margin-top: 10px; }

/* Cita/testimonio destacado sobre fondo navy (mismo degradé que .cta-band) */
.testimonio {
  background: linear-gradient(120deg, var(--cinco-navy) 0%, var(--cinco-navy-soft) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 30px 34px;
  margin-top: 20px;
}
.testimonio p:first-child { font-size: 17px; font-style: italic; margin: 0 0 10px; }
.testimonio p:last-child { color: var(--cinco-amber); font-size: 13px; font-weight: 600; margin: 0; }

/* Enlace de regreso, sobre el banner navy de una página interna */
.breadcrumb-back { display: block; font-size: 13px; font-weight: 600; color: var(--cinco-amber); margin-bottom: 14px; }
.breadcrumb-back:hover { text-decoration: underline; }

/* Cuando una franja CTA lleva dos botones en vez de uno */
.cta-band-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- página de contacto: layout partido formulario / info ---- */
.contact-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 820px) {
  .contact-split { grid-template-columns: 1fr; }
}
.contact-panel {
  background: var(--cinco-navy);
  color: #fff;
  border-radius: var(--radius);
  padding: 34px 30px;
}
.contact-panel h3 { font-size: 19px; margin-bottom: 18px; }
.contact-panel .contact-line {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 18px;
  font-size: 14px;
  color: #d7dbe1;
}
.contact-panel .contact-line .ico { font-size: 18px; }
.contact-panel a { color: #fff; text-decoration: underline; }

form.pqr-form label {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
  margin: 14px 0 6px;
}
form.pqr-form input,
form.pqr-form textarea,
form.pqr-form select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
form.pqr-form select { max-width: 100%; text-overflow: ellipsis; }
form.pqr-form input:focus,
form.pqr-form textarea:focus,
form.pqr-form select:focus {
  outline: none;
  border-color: var(--cinco-amber-dark);
  box-shadow: 0 0 0 3px rgba(254, 178, 9, 0.2);
}
/* Botón de mostrar/ocultar dentro de un campo de contraseña — ver
   agregarToggleClave en clave-visible.js. */
.control-clave-wrap { position: relative; }
.control-clave-wrap input { padding-right: 44px; }
.control-clave-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--text-muted);
  border-radius: 8px;
}
.control-clave-toggle:hover { color: var(--cinco-amber-dark); background: rgba(254, 178, 9, 0.12); }
form.pqr-form textarea { resize: vertical; }
.control-enlace-fila { display: flex; gap: 8px; align-items: center; }
.control-enlace-fila input { flex: 1; min-width: 0; }
.control-input-unidad { position: relative; }
.control-input-unidad span {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted, #6b7280);
  font-size: 14px;
  pointer-events: none;
}
form.pqr-form .control-input-unidad input { padding-left: 30px; }
.honeypot-field { position: absolute; left: -9999px; top: -9999px; }
form.pqr-form button { margin-top: 20px; width: 100%; }
.form-alert {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  display: none;
}
.form-alert.show { display: block; }
.form-alert.ok { background: rgba(46, 158, 91, 0.14); color: #1f7a41; }
.form-alert.error { background: rgba(214, 69, 69, 0.14); color: #b23434; }

/* ---- Modal genérico (mismo patrón que Copropiedad Saludable/LBDC Neiva:
   .modal-backdrop + .modal) — no existía todavía en este repo. Se agrega acá
   para el formulario de "Agregar/editar documento" del contrato, que antes
   era un <details> inline que crecía dentro de la página en vez de flotar
   encima — pedido del usuario tras verlo "grande y feo". ---- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 24px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal h2 { margin-top: 0; font-size: 18px; color: var(--text); }
/* Más ancho que el modal genérico para poder acomodar el formulario en dos
   columnas en vez de un solo listado vertical largo. */
.modal-ancho { max-width: 640px; }

/* Formulario compacto en dos columnas — letra y relleno bastante más chicos
   que .pqr-form (pensado para formularios cortos de una sola columna), para
   que quepan varios campos por línea dentro de una ventana modal en vez de
   una página completa. Los campos que sí necesitan todo el ancho (enlace,
   archivo, botones) llevan la clase "campo-ancho". */
form.modal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
form.modal-form-grid .campo-ancho { grid-column: 1 / -1; }
form.modal-form-grid label {
  display: block;
  font-weight: 600;
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 10px 0 4px;
}
form.modal-form-grid input:not([type="checkbox"]),
form.modal-form-grid select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
}
/* Casillas (Estado/Fecha/... y los checks de permisos/roles): sin esto,
   heredaban width:100% de la regla de arriba y se veían enormes, empujando
   el texto de su propia etiqueta lejos a la derecha en vez de al lado. */
form.modal-form-grid input[type="checkbox"] { width: auto; }
form.modal-form-grid .control-input-unidad input { padding-left: 26px; }
form.modal-form-grid .control-input-unidad span { font-size: 12.5px; left: 10px; }
form.modal-form-grid input:focus,
form.modal-form-grid select:focus {
  outline: none;
  border-color: var(--cinco-amber-dark);
  box-shadow: 0 0 0 3px rgba(254, 178, 9, 0.2);
}
form.modal-form-grid .control-edicion-botones { margin-top: 14px; gap: 8px; }
form.modal-form-grid .control-edicion-botones button { width: auto; margin-top: 0; }
/* El display:block de "form.modal-form-grid label" de arriba es para las
   etiquetas normales (encima de un input) — pisaba el display:flex que
   .control-check-inline y .control-campos-permiso-lista necesitan para
   alinear el checkbox junto a su texto (ej. en el modal de "Nuevo
   empleado"), dejando el cuadrito arriba y el texto debajo. Se reafirma acá. */
form.modal-form-grid .control-check-inline,
form.modal-form-grid .control-campos-permiso-lista label {
  display: flex;
}

/* ---- pie de página multi-columna ---- */
.site-footer {
  background: var(--cinco-navy-dark);
  color: #aab1ba;
  padding: 56px 0 24px;
  font-size: 13.5px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
.footer-col img { height: 34px; margin-bottom: 14px; }
.footer-col h4 { color: #fff; font-size: 13.5px; margin-bottom: 14px; letter-spacing: 0.4px; }
.footer-col p { color: #9aa2ad; font-size: 13px; }
.footer-col a { color: #aab1ba; }
.footer-col a:hover { color: var(--cinco-amber); }
.footer-tagline { font-family: "Alex Brush", cursive; font-size: 25px; color: #9aa2ad; margin-top: 8px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-bottom {
  padding-top: 20px;
  text-align: center;
  font-size: 12px;
  color: #6b7480;
}

/* ---- Corporativo: Fruto del Espíritu (Gálatas 5:22-23) ----
   Una franja elegante de una sola línea (fluye con el documento, no con
   posiciones absolutas) arriba de las tarjetas de Misión/Visión/Valores
   — las 9 palabras en el orden del versículo, separadas por un punto
   decorativo, en un degradado dorado metálico. Al ser flujo normal, nunca
   se corta ni se encima con nada, y se ve bien en cualquier ancho de
   pantalla (el texto simplemente pasa a la siguiente línea si hace falta). */
.frutos-banda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}
/* Cada fruto como su propio botón/chip navy-ámbar (mismo lenguaje visual
   con textura y relieve 3D que .linea-badge / .acordeon-trigger) en vez de
   texto plano en degradado dorado, para que resalten como elementos de
   diseño y no como un simple listado. */
.frutos-banda .fruto {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cinco-amber);
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(254, 178, 9, 0.14) 0 8px, rgba(254, 178, 9, 0) 8px 16px),
    linear-gradient(135deg, var(--cinco-navy) 0%, var(--cinco-navy-dark) 100%);
  box-shadow:
    0 8px 18px rgba(18, 22, 29, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -2px 6px rgba(0, 0, 0, 0.32);
}
.frutos-banda .fruto::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cinco-amber-dark), var(--cinco-amber), var(--cinco-amber-dark));
}
.frutos-cita {
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
  font-style: italic;
  margin: 0 0 40px;
}

/* ---- módulo interno: Control de Contratos (web/control/*) ---- */
.text-muted { color: var(--text-muted); }
.control-volver { color: inherit; }
.control-container-angosto { max-width: 420px; }
.control-form-sin-margen { margin-bottom: 0; }
.w-60 { width: 60px; }
.w-70 { width: 70px; }
.w-90 { width: 90px; }
.w-100 { width: 100px; }
.w-110 { width: 110px; }
.w-120 { width: 120px; }
.w-130 { width: 130px; }
.w-150 { width: 150px; }
.w-190 { width: 190px; }
.w-260 { width: 260px; }
.w-220 { width: 220px; }

.control-userbar { display: flex; align-items: center; gap: 14px; font-size: 13px; color: #dfe3e8; }
.control-userbar-link { color: #dfe3e8; text-decoration: underline; font-size: 12.5px; }
.control-userbar-link:hover { color: var(--cinco-amber); }
.control-userbar button {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #fff;
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
}
.control-userbar button:hover { background: rgba(255, 255, 255, 0.1); }

.control-nuevo summary { cursor: pointer; font-weight: 700; color: var(--cinco-navy); font-size: 15px; }
@media (prefers-color-scheme: dark) { .control-nuevo summary { color: #fff; } }
.control-nuevo[open] summary { margin-bottom: 18px; }
.control-nuevo form { margin-top: 4px; }

.control-lista { margin-top: 28px; }

.control-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.control-cabecera-datos { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); }
.control-edicion { margin-top: 20px; }
.control-edicion-botones { display: flex; gap: 12px; margin-top: 20px; }
form.pqr-form .control-edicion-botones button { width: auto; margin-top: 0; white-space: nowrap; }

.control-rol-ayuda { margin: -4px 0 0; font-size: 12.5px; }
.control-informes-ayuda { margin-top: -6px; font-size: 12.5px; }
.control-meses-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.control-mes-pill {
  font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  border: 1px dashed var(--border); color: var(--text-muted); background: transparent;
}
.control-mes-pill.hecho { border-style: solid; border-color: var(--cinco-amber-dark); color: var(--cinco-navy); background: rgba(254, 178, 9, 0.12); }
@media (prefers-color-scheme: dark) { .control-mes-pill.hecho { color: #fff; } }
button.control-mes-pill.pendiente { cursor: pointer; }
button.control-mes-pill.pendiente:hover { border-color: var(--cinco-amber-dark); color: var(--cinco-amber-dark); }
.control-check-inline { display: flex; align-items: center; gap: 6px; font-weight: 400; margin: 14px 0 6px; }
/* Fila de una celda de tabla con más de un control (ej. casilla "Autorizado"
   + botón de firma en Empleados > Ofertas) — todo en línea, nunca apilado,
   para que la fila no crezca de alto por culpa de una sola celda. */
.control-celda-inline { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.control-celda-inline .control-check-inline { margin: 0; white-space: nowrap; }
.control-campos-permiso { margin-top: 14px; }
.control-campos-permiso-lista { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.control-campos-permiso-lista label {
  display: flex; align-items: center; gap: 6px;
  font-weight: 400; font-size: 13.5px; margin: 0;
}

/* Envuelve las secciones "de jefe" del formulario de Orden de Trabajo para
   poder ocultarlas de un tirón en la vista del responsable/personal (ver
   #otSeccionesJefe en ordenes-trabajo.js) — display:contents saca el <div>
   mismo del árbol de layout sin sacar a sus hijos, que si no dejarían de
   participar en el grid de 2 columnas del formulario (quedarían todos
   amontonados en una sola celda). Se apaga solo cuando trae .oculto. */
#otSeccionesJefe:not(.oculto) { display: contents; }

/* Orden de Trabajo: separador de sección dentro del formulario largo (Datos
   generales/Recursos/Riesgos/PESV/...) — una línea ámbar + título en el
   navy de marca (en vez de negro plano), para que un formulario de más de
   40 campos se lea por bloques de un vistazo en vez de un solo párrafo
   continuo — y en mayúscula/tamaño chico para no competir con los valores
   que sí importa leer. */
.control-ot-seccion {
  margin: 16px 0 4px;
  padding-top: 8px;
  border-top: 2px solid var(--cinco-amber);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--cinco-navy);
}
@media (prefers-color-scheme: dark) { .control-ot-seccion { color: var(--cinco-amber); } }
.control-ot-seccion:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.control-ot-seccion .text-muted { text-transform: none; letter-spacing: normal; font-size: 11px; }

/* Firma dibujada a mano (responsable de los trabajos, al cerrar la orden):
   recuadro claro con trazo punteado — mismo lenguaje visual que
   .control-ot-vehiculo-nuevo para "zona donde se hace algo distinto a
   escribir en un campo". El canvas se dibuja con JS (ver
   ordenes-trabajo.js); acá solo el marco. */
.control-firma-wrap {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 6px;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.control-campo-obligatorio { font-weight: 400; font-size: 11.5px; color: #b23434; }
/* Se agrega/quita por JS cuando el envío se bloquea por falta de firma (ver
   ordenes-trabajo.js) — el recuadro se resalta en rojo y hace un pequeño
   "shake" para que sea imposible no notar dónde falta actuar, en vez de
   depender solo del texto de alertBox que puede quedar fuera de la vista. */
.control-firma-wrap.control-firma-falta {
  border: 1px solid #d64545;
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.18);
  animation: control-firma-shake 0.4s;
}
@keyframes control-firma-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
#otFirmaCanvas {
  display: block;
  width: 100%;
  height: 110px;
  touch-action: none;
  cursor: crosshair;
  border-radius: 6px;
}
.control-firma-ayuda { font-size: 10.5px; margin: 4px 2px 0; }

/* Orden de Trabajo tiene, de lejos, el formulario más largo de Control de
   Contratos (Datos generales + Recursos + Riesgos + PESV + Preoperacionales
   + Cierre) — se reduce la letra un poco más que el resto de modales
   (que ya son compactos, ver form.modal-form-grid arriba) solo acá, sin
   tocar los demás formularios del sitio, para aprovechar mejor el alto de
   la ventana emergente. */
#ordenForm label { font-size: 10.5px; margin: 8px 0 3px; }
#ordenForm input:not([type="checkbox"]),
#ordenForm select,
#ordenForm textarea { padding: 6px 8px; font-size: 11.5px; }
#ordenForm textarea { resize: vertical; }

#otConfirmacionCreada { padding: 4px 0 0; }
#otConfirmacionCreada button { margin-right: 8px; }
#otConfirmacionSinTelefono { font-size: 11.5px; }

/* Checklists de "Trabajo de alto riesgo" y "Requerimientos
   preoperacionales": en 2-3 columnas según el ancho disponible, en vez de
   una sola columna angosta con mucho espacio muerto a la derecha (misma
   razón que las tablas de informes: no desperdiciar ancho). */
.control-ot-riesgos, .control-ot-preoperacionales {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px 14px;
  margin-top: 6px;
}
.control-ot-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.control-ot-item span { font-size: 12.5px; }
.control-ot-item select { width: 84px; padding: 4px 6px; font-size: 12px; }

/* Recursos > Vehículo: fila tipo/placa cuando se elige "Otro" (no es de la
   empresa) — dos columnas, mismo look que el resto del formulario. Y la
   mini-fila para dar de alta un vehículo nuevo de la empresa, sin abrir un
   modal aparte para algo tan chico (placa + tipo + botón, en línea). */
.control-ot-vehiculo-otro { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* Fila inferior del bloque de Responsables: nombre + cédula de quien
   genera la orden (automático, según quién inició sesión) y de quien
   ejecuta los trabajos (según el empleado elegido arriba) — de solo
   lectura, para verificar de una vez que ambas identidades quedaron bien
   vinculadas antes de guardar, en vez de descubrirlo recién en el PDF. */
.control-ot-identidad { margin: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); font-size: 12.5px; font-weight: 600; }
.control-ot-identidad.sin-cedula { color: #b23434; }
@media (prefers-color-scheme: dark) { .control-ot-identidad.sin-cedula { color: #ff8a8a; } }
#otDescripcion[readonly] { background: var(--bg); opacity: 0.85; cursor: default; }
.control-ot-vehiculo-nuevo {
  display: flex; align-items: center; gap: 8px; margin: 4px 0 10px;
  padding: 8px; border: 1px dashed var(--border); border-radius: 8px;
}
.control-ot-vehiculo-nuevo input { flex: 1; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; }
.control-ot-vehiculo-nuevo button { width: auto; flex: none; }

/* Filas dinámicas de "Personal adicional" (código/nombre/cédula por
   persona, "+ agregar persona" en vez de las 4 filas fijas del papel). */
.control-ot-personal-lista { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.control-ot-personal-fila { display: flex; align-items: center; gap: 8px; }
.control-ot-personal-fila select { flex: 1; }
.control-ot-personal-fila button { width: auto; flex: none; }
.control-campos-fila { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding: 10px 0; border-top: 1px dashed var(--border); }
.control-campos-resumen { font-size: 12.5px; color: var(--text-muted); }
.control-cabecera-datos label { display: flex; align-items: center; gap: 6px; }
.control-cabecera select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  font-size: 13px;
}

.control-badge {
  display: inline-block;
  background: rgba(254, 178, 9, 0.14);
  color: var(--cinco-amber-dark);
  border: 1px solid rgba(254, 178, 9, 0.35);
  font-weight: 700;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 999px;
}
.control-badge-lg { font-size: 13.5px; padding: 7px 16px; }
/* Contador que llegó a su meta (ej. "6/6") — mismo verde que
   .control-estado-vigente, para no inventar una segunda paleta de "ok". */
.control-badge.completo {
  color: #1a7a4c;
  background: rgba(34, 153, 84, 0.14);
  border-color: rgba(34, 153, 84, 0.35);
}
@media (prefers-color-scheme: dark) {
  .control-badge.completo { color: #5fe0a0; background: rgba(34, 197, 94, 0.16); border-color: rgba(34, 197, 94, 0.35); }
}
:root[data-theme="dark"] .control-badge.completo { color: #5fe0a0; background: rgba(34, 197, 94, 0.16); border-color: rgba(34, 197, 94, 0.35); }
:root[data-theme="light"] .control-badge.completo { color: #1a7a4c; background: rgba(34, 153, 84, 0.14); border-color: rgba(34, 153, 84, 0.35); }

.control-estado-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}
.control-estado-vigente {
  color: #1a7a4c;
  background: rgba(34, 153, 84, 0.14);
  border: 1px solid rgba(34, 153, 84, 0.35);
}
.control-estado-obsoleto {
  color: #96605f;
  background: rgba(150, 96, 95, 0.12);
  border: 1px solid rgba(150, 96, 95, 0.28);
}
@media (prefers-color-scheme: dark) {
  .control-estado-vigente { color: #5fe0a0; background: rgba(34, 197, 94, 0.16); border-color: rgba(34, 197, 94, 0.35); }
  .control-estado-obsoleto { color: #b98f8e; background: rgba(150, 96, 95, 0.22); border-color: rgba(150, 96, 95, 0.4); }
}
:root[data-theme="dark"] .control-estado-vigente { color: #5fe0a0; background: rgba(34, 197, 94, 0.16); border-color: rgba(34, 197, 94, 0.35); }
:root[data-theme="dark"] .control-estado-obsoleto { color: #b98f8e; background: rgba(150, 96, 95, 0.22); border-color: rgba(150, 96, 95, 0.4); }
:root[data-theme="light"] .control-estado-vigente { color: #1a7a4c; background: rgba(34, 153, 84, 0.14); border-color: rgba(34, 153, 84, 0.35); }
:root[data-theme="light"] .control-estado-obsoleto { color: #96605f; background: rgba(150, 96, 95, 0.12); border-color: rgba(150, 96, 95, 0.28); }

.control-btn-danger {
  background: none;
  border: 1.5px solid #d64545;
  color: #b23434;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.control-btn-danger:hover { background: rgba(214, 69, 69, 0.1); }
@media (prefers-color-scheme: dark) { .control-btn-danger { color: #ff8a8a; border-color: #ff8a8a; } }

/* Acordeón nativo (<details>/<summary>) sin JS: flecha propia porque
   display:flex en <summary> oculta el marcador nativo del navegador. */
.control-campo summary,
.control-fase summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}
.control-campo summary::-webkit-details-marker,
.control-fase summary::-webkit-details-marker { display: none; }
.control-campo summary::before,
.control-fase summary::before {
  content: "\25B8";
  color: var(--cinco-amber-dark);
  transition: transform 0.15s ease;
  margin-right: 10px;
}
.control-campo[open] > summary::before,
.control-fase[open] > summary::before { transform: rotate(90deg); }
.control-campo summary span:first-child { font-weight: 700; color: var(--cinco-navy); font-size: 16px; }
@media (prefers-color-scheme: dark) { .control-campo summary span:first-child { color: #fff; } }
.control-campo[open] summary { margin-bottom: 16px; }

.control-fase { border-top: 1px solid var(--border); padding: 14px 0 0; margin-top: 14px; }
.control-fase summary span:first-child { font-weight: 600; font-size: 14px; }
.control-fase[open] summary { margin-bottom: 12px; }
.control-fase .control-items { padding-left: 18px; }

.control-item {
  display: grid;
  grid-template-columns: minmax(200px, 1.6fr) 132px 132px 150px minmax(160px, 1.2fr) minmax(160px, 1.2fr);
  gap: 10px;
  align-items: center;
  padding: 9px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.control-item-header {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}
.control-item input,
.control-item select {
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  font-size: 12.5px;
}
.control-item input:focus,
.control-item select:focus {
  outline: none;
  border-color: var(--cinco-amber-dark);
  box-shadow: 0 0 0 3px rgba(254, 178, 9, 0.2);
}

.control-item-notas-celda { display: flex; gap: 6px; align-items: center; }
.control-item-notas-celda input { flex: 1; min-width: 0; }
.control-item-oculto { color: var(--text-muted); text-align: center; }
.control-item-mas {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.control-item-mas:hover {
  background: rgba(254, 178, 9, 0.12);
  color: var(--cinco-amber-dark);
  border-color: var(--cinco-amber-dark);
}

/* Panel oculto por defecto (verificación + historial de estado) — se abre
   con el botón "⋯" de cada fila para no recargar la tabla del día a día. */
.control-item-detalle {
  background: rgba(0, 0, 0, 0.025);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: -2px 0 10px;
  font-size: 12.5px;
}
@media (prefers-color-scheme: dark) { .control-item-detalle { background: rgba(255, 255, 255, 0.03); } }
.control-item-detalle-verif { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 12px; }
.control-item-detalle-verif label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.control-item-detalle-verif input {
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.control-item-historial strong {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.control-item-historial ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.control-item-historial li.text-muted { font-style: italic; }

.control-item-borrar { margin-top: 12px; }

@media (max-width: 760px) {
  .control-item { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .control-item-header { display: none; }
  .control-item-nombre { grid-column: 1 / -1; font-weight: 600; }
}

/* ---- Listado Maestro de Documentos (web/control/documentos.html) ---- */
.control-filtros { display: flex; gap: 20px; margin: 24px 0 16px; flex-wrap: wrap; }
.control-filtros label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--text-muted); }
.control-filtros select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  font-size: 13px;
}

.control-tabla-wrap { overflow-x: auto; }
table.control-tabla-documentos,
table.control-tabla-cambios {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 13px;
}
table.control-tabla-documentos th,
table.control-tabla-documentos td,
table.control-tabla-cambios th,
table.control-tabla-cambios td {
  text-align: left;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.control-tabla-cambios th,
table.control-tabla-cambios td {
  padding: 10px 14px;
}
/* Fila delgada de una sola línea (mismo criterio que .tabla-densa en
   Copropiedad Saludable/inventario.html): letra y relleno más chicos, y
   los botones de "Ver/Editar/Borrar" pasan de texto a solo ícono
   (.icon-btn) para que las tres acciones quepan siempre en una línea en
   vez de partirse en dos dentro de la celda. */
table.control-tabla-documentos th,
table.control-tabla-documentos td {
  padding: 5px 10px;
  font-size: 12.5px;
}
table.control-tabla-cambios td:nth-child(3) { white-space: normal; }
table.control-tabla-documentos th,
table.control-tabla-cambios th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.025);
}
@media (prefers-color-scheme: dark) {
  table.control-tabla-documentos th,
  table.control-tabla-cambios th { background: rgba(255, 255, 255, 0.04); }
}
table.control-tabla-documentos td.control-tabla-acciones {
  white-space: nowrap;
  overflow: visible;
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
}

/* Botón de solo ícono (sin texto, con title como tooltip) — mismo patrón
   que .icon-btn en Copropiedad Saludable/inventario.html, portado acá para
   que "Ver/Editar/Borrar" quepan en una fila delgada. */
.icon-btn {
  border: none;
  background: none;
  cursor: pointer;
  padding: 4px 7px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
}
.icon-btn:hover { background: rgba(0, 0, 0, 0.06); }
@media (prefers-color-scheme: dark) { .icon-btn:hover { background: rgba(255, 255, 255, 0.08); } }
.icon-btn.danger { color: #b23434; }
@media (prefers-color-scheme: dark) { .icon-btn.danger { color: #ff8a8a; } }
tr.control-fila-doc { cursor: pointer; }
tr.control-fila-doc:hover { background: rgba(254, 178, 9, 0.08); }
tr.control-fila-doc td:first-child { font-weight: 700; color: var(--cinco-amber-dark); }

/* ---- Lista + panel de detalle (mismo patrón que Empleados en Cinco
   Conecta y Activos/Usuarios en Copropiedad Saludable): la tabla queda
   angosta, una sola línea por fila, sin columna de acciones — todo el
   detalle completo, incluidas las acciones, vive en el panel fijo de
   arriba (.control-vp-*). Clic en una fila la deja fijada en el panel
   hasta hacer clic en otra; al entrar o cambiar de filtro se fija sola la
   primera fila, para que el panel nunca arranque vacío. Evita que listas
   con muchas columnas obliguen a correr una barra horizontal para ver la
   última columna o las acciones. */
.control-tabla-seleccionable tbody tr { cursor: pointer; }
.control-tabla-seleccionable tr.control-fila-fijada { background: rgba(254, 178, 9, 0.16); }
.control-tabla-seleccionable tr.control-fila-fijada:hover { background: rgba(254, 178, 9, 0.24); }

.control-vista-previa {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; margin-bottom: 14px;
  background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow);
}
.control-vista-previa .control-vp-encabezado { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.control-vista-previa .control-vp-titulo { font-size: 16px; font-weight: 800; color: var(--text); }
.control-vista-previa .control-vp-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.control-vista-previa .control-vp-grupos { display: flex; flex-wrap: wrap; gap: 8px; }
.control-vista-previa .control-vp-grupo { flex: 1 1 200px; min-width: 180px; padding: 7px 10px 8px; border-radius: 8px; background: var(--bg); }
.control-vista-previa .control-vp-grupo-titulo { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 6px; }
.control-vista-previa .control-vp-grupo-campos { display: flex; flex-direction: column; }
.control-vista-previa .control-vp-campo { padding: 5px 0; border-bottom: 1px solid var(--border); }
.control-vista-previa .control-vp-campo:last-child { border-bottom: none; padding-bottom: 0; }
.control-vista-previa .control-vp-campo:first-child { padding-top: 0; }
.control-vista-previa .control-vp-etiqueta { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-muted); }
.control-vista-previa .control-vp-valor { display: block; position: relative; padding-left: 13px; font-size: 12.5px; font-weight: 700; color: var(--cinco-amber-dark); white-space: normal; word-break: break-word; }
.control-vista-previa .control-vp-valor::before { content: "•"; position: absolute; left: 0; top: 0; color: var(--cinco-amber-dark); }

/* Ribete de color primario por tarjeta (mismo criterio que las
   subtarjetas del Bosquejo en LBDC Neiva): azul, rojo, amarillo, verde y
   vuelve a empezar. El color de cada tarjeta tiñe su ribete izquierdo, su
   título y la viñeta de sus valores; el fondo pasa a tarjeta blanca con
   sombra suave para que el ribete resalte. Aplica a todas las vistas
   previas del módulo (Ofertas, Contratos, Correspondencia, Órdenes de
   Trabajo, Empleados). */
.control-vista-previa .control-vp-grupo {
  --pc: #1f5fbf;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 6px solid var(--pc);
  border-radius: 10px;
  padding: 8px 12px 9px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}
.control-vista-previa .control-vp-grupo:nth-child(4n + 2) { --pc: #d93636; }
.control-vista-previa .control-vp-grupo:nth-child(4n + 3) { --pc: #e0a800; }
.control-vista-previa .control-vp-grupo:nth-child(4n + 4) { --pc: #1e9e57; }
.control-vista-previa .control-vp-grupo-titulo { color: var(--pc); }
.control-vista-previa .control-vp-grupo .control-vp-valor::before { color: var(--pc); }

/* ---- Visualizador de ofertas (ofertas.html): lista a la izquierda con el
   mismo ribete de color primario, PDF real a la derecha. ---- */
.modal.visor-ofertas { max-width: 1200px; height: 90vh; max-height: 90vh; display: flex; flex-direction: column; padding: 18px 20px; overflow: hidden; }
.visor-ofertas-encabezado { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.visor-ofertas-encabezado h2 { margin: 0; white-space: nowrap; }
.visor-ofertas-encabezado input { flex: 1; min-width: 0; }
.visor-ofertas-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px 1fr; gap: 14px; }
.visor-ofertas-lista { list-style: none; margin: 0; padding: 0 4px 0 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.visor-ofertas-lista li[data-id] {
  --pc: #1f5fbf;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  font-size: 12.5px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 6px solid var(--pc);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.visor-ofertas-lista li[data-id]:nth-child(4n + 2) { --pc: #d93636; }
.visor-ofertas-lista li[data-id]:nth-child(4n + 3) { --pc: #e0a800; }
.visor-ofertas-lista li[data-id]:nth-child(4n + 4) { --pc: #1e9e57; }
.visor-ofertas-lista li[data-id] strong { color: var(--pc); }
.visor-ofertas-lista li[data-id]:hover { border-color: var(--pc); }
.visor-ofertas-lista li.activa { outline: 2px solid var(--cinco-amber); background: rgba(254, 178, 9, 0.10); }
.visor-ofertas-item-titulo { font-weight: 600; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.visor-ofertas-vacio { padding: 8px; font-size: 13px; }
.visor-ofertas-panel { display: flex; flex-direction: column; min-height: 0; }
.visor-ofertas-barra { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.visor-ofertas-titulo { flex: 1; min-width: 0; font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-ofertas-pdf { flex: 1; min-height: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg); }
.visor-ofertas-pdf iframe { width: 100%; height: 100%; border: 0; }
.visor-ofertas-cargando { padding: 16px; margin: 0; }
@media (max-width: 800px) {
  .visor-ofertas-cuerpo { grid-template-columns: 1fr; grid-template-rows: 180px 1fr; }
  .visor-ofertas-encabezado { flex-wrap: wrap; }
}

/* Barra de filtros sobre una lista fila+panel (Contratos/Correspondencia/
   Órdenes de Trabajo) — texto libre y/o desplegables/fechas, en una sola
   fila que se envuelve si no cabe. Filtra en el cliente sobre lo que ya
   está cargado, sin ir a Firestore por cada cambio. Nombre distinto de
   ".control-filtros" (Documentos, más arriba) a propósito — esa ya usa
   <label>Etiqueta<select>...</select></label>, esta un <input>/<select>
   suelto; mezclar los dos bajo el mismo nombre pisaba el estilo del otro. */
.control-filtros-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; }
.control-filtros-lista input[type="text"] { flex: 1 1 220px; min-width: 160px; }
.control-filtros-lista input[type="text"],
.control-filtros-lista input[type="date"],
.control-filtros-lista select {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card-bg); color: var(--text); font-size: 12.5px;
}
.control-filtros-lista select { flex: 0 1 200px; }
.control-filtros-lista input[type="date"] { flex: 0 1 140px; }
.control-filtros-lista .control-filtros-fecha { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }

/* ---- Equipo asignado (web/control/contrato.html) ---- */
.control-equipo-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.control-equipo-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
}
.control-equipo-fila span:first-child { font-weight: 600; }
.control-equipo-fila span:nth-child(2) { flex: 1; }
.control-equipo-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.control-equipo-form select {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  font-size: 13px;
  min-width: 220px;
}

.control-btn-mini {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: none;
  color: var(--cinco-navy);
  font-weight: 600;
  font-size: 11.5px;
  cursor: pointer;
  white-space: nowrap;
}
.control-btn-mini:hover { border-color: var(--cinco-amber-dark); color: var(--cinco-amber-dark); }
.control-btn-mini:disabled { opacity: 0.35; cursor: default; }
@media (prefers-color-scheme: dark) { .control-btn-mini { color: #fff; } }

/* ---- editor de bloques (texto/imagen) de una carta ---- */
.control-bloques-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
form.pqr-form .control-bloques-header button { width: auto; margin-top: 0; }
.control-bloques { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.control-bloque {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
}
.control-bloque-contenido { flex: 1; min-width: 0; }
.control-bloque-contenido textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  resize: vertical;
}
.control-bloque-imagen { max-width: 100%; max-height: 160px; border-radius: 6px; display: block; margin-bottom: 8px; }
.control-imagen-tamano { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12.5px; color: var(--text-muted); }
.control-imagen-tamano input[type="range"] { flex: 1; max-width: 200px; }
.control-bloque-controles { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.control-bloques-botones { display: flex; gap: 10px; margin: 4px 0 20px; flex-wrap: wrap; }
form.pqr-form .control-bloques-botones button,
form.pqr-form .control-tabla-botones button,
form.pqr-form .control-bloque-gap button { width: auto; margin-top: 0; }
/* Visualizar / Guardar / Descargar — misma franja de 3 acciones en
   Informes, Ofertas y Correspondencia. */
.control-3botones { display: flex; gap: 10px; margin-top: 20px; }
form.pqr-form .control-3botones button { width: auto; flex: 1; margin-top: 0; }
form.pqr-form .control-3botones button:disabled { opacity: 0.5; cursor: not-allowed; }
.control-bloque-etiqueta { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin-bottom: 4px; }
/* Campo de párrafo con formato (negrilla/cursiva/color) — ver
   web/js/control/texto-rico.js. Mismo lenguaje visual que el resto de los
   campos del editor de bloques, con la mini barra pegada arriba. */
.control-rich-toolbar { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.control-rich-btn, .control-rich-color {
  width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--card-bg);
  cursor: pointer; padding: 0;
}
.control-rich-btn { font-size: 13px; color: var(--text); display: inline-flex; align-items: center; justify-content: center; }
.control-rich-btn:hover, .control-rich-color:hover { border-color: var(--cinco-amber); }
.control-rich-btn.activo { border-color: var(--cinco-amber); background: rgba(254, 178, 9, 0.18); }
.control-rich-color { padding: 2px; }
/* Dos reglas genéricas de más arriba en este archivo le ganan por
   especificidad a este componente y lo desconfiguran dentro de
   Ofertas/Informes/Correspondencia (los tres formularios con class
   "pqr-form"): "form.pqr-form button { width:100%; margin-top:20px }"
   (botones grandes de acción) estira cada botón de la barra (Negrilla,
   Cursiva, viñeta, alineación) a lo ancho del formulario, y
   "form.pqr-form input { width:100%; padding:12px 14px }" (campos de
   texto) hace lo mismo con el selector de color. Resultado sin esto: la
   barra compacta de íconos se ve como una pila de filas sueltas. Mismo
   arreglo que ya tienen los otros grupos de botones chicos del formulario
   (.control-bloques-header, .control-bloque-gap, etc.) más abajo. */
form.pqr-form .control-rich-btn, form.pqr-form .control-rich-color { width: 26px; margin-top: 0; }
form.pqr-form .control-rich-color { padding: 2px; border-radius: 6px; }
.control-rich-editable {
  width: 100%; min-height: 70px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px;
  background: var(--bg); color: var(--text); font-family: inherit; overflow-y: auto;
}
.control-rich-editable:focus { outline: none; border-color: var(--cinco-amber); box-shadow: 0 0 0 3px rgba(254, 178, 9, 0.18); }
.control-rich-editable:empty:before { content: attr(data-placeholder); color: var(--text-muted); }
.control-rich-editable ul, .control-rich-editable ol { margin: 4px 0; padding-left: 22px; }
.control-rich-editable li { margin: 2px 0; }
/* Hueco entre bloques (y antes del primero): botones siempre visibles
   para insertar un bloque nuevo ahí mismo, no solo al final de la lista
   (pedido explícito: no obligar a bajar hasta el final para agregar un
   título/párrafo/tabla/gráfico junto a un campo puntual). */
.control-bloque-gap {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 6px;
  background: rgba(254, 178, 9, 0.06);
  border: 1px dashed rgba(254, 178, 9, 0.35);
  border-radius: 10px;
}
.control-bloque-contenido input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  margin-top: 6px;
}

.control-badge-final {
  font-size: 11.5px;
  color: #1a7f4e;
  font-weight: 600;
  margin-top: 3px;
}

.control-firma-editor { display: flex; flex-direction: column; gap: 8px; }
.control-firma-firmantes { display: flex; flex-direction: column; gap: 6px; }
.control-firma-firmante { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.control-firma-firmante input { flex: 1; min-width: 160px; }
.control-firma-imagen-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.control-firma-imagen-preview { height: 110px; max-width: 260px; object-fit: contain; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
.control-firma-tamano { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.control-firma-tamano input { flex: 0 0 auto; min-width: 0; width: 52px; }

.control-tabla-editor { display: flex; flex-direction: column; gap: 8px; }
.control-tabla-tamano { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.control-tabla-tamano label { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-muted); }
.control-tabla-tamano input[type="number"] {
  width: 60px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 12.5px;
}
.control-tabla-grid { display: grid; gap: 4px; overflow-x: auto; }
.control-tabla-grid input, .control-tabla-grid select, .control-tabla-grid textarea {
  min-width: 90px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 12.5px;
}
/* La celda es un <textarea> (para que un salto de línea se quede dentro de
   la misma celda en vez de saltar a la de abajo) pero debe verse y
   comportarse como el <input> de una sola línea que era antes — sin barra
   de redimensionar a mano ni scrollbar propia; el alto real lo ajusta JS
   (ver "autoAltura" en renderTablaEditor) según el contenido. */
.control-tabla-grid textarea {
  resize: none;
  overflow: hidden;
  font-family: inherit;
  line-height: 1.35;
}
/* Resalta el rango de celdas seleccionado por arrastre, antes de combinar
   o separar — mismo acento ámbar que el resto de la suite. */
.control-tabla-grid input.control-celda-sel, .control-tabla-grid select.control-celda-sel, .control-tabla-grid textarea.control-celda-sel {
  border-color: var(--cinco-amber);
  box-shadow: 0 0 0 2px rgba(254, 178, 9, 0.35);
  background: rgba(254, 178, 9, 0.1);
}
/* Mini-barra flotante que aparece pegada a la última celda seleccionada
   (ver actualizarResaltado en renderTablaEditor) — mismas acciones más
   usadas que la barra fija de abajo, para no tener que bajar hasta allá
   cada vez, como en Excel. */
.control-tabla-flotante {
  position: absolute;
  display: flex;
  gap: 4px;
  background: var(--card-bg);
  border: 1px solid var(--cinco-amber);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  z-index: 20;
}
.control-tabla-botones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.control-tabla-color {
  width: 34px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  cursor: pointer;
}

.control-items-editor { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.control-items-fila { display: flex; gap: 6px; align-items: center; }
.control-items-num {
  flex: 0 0 22px;
  text-align: center;
  font-weight: 700;
  color: var(--text-muted);
  font-size: 12.5px;
}
.control-items-fila input {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 12.5px;
}
.control-items-fila input[type="text"] { flex: 3; min-width: 140px; }
.control-items-fila input.control-items-unidad { flex: 0.7; min-width: 80px; }
.control-items-fila input[type="number"] { flex: 1; min-width: 70px; }
.control-items-fila .control-items-total {
  flex: 1.4;
  min-width: 105px;
  text-align: right;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cinco-navy);
  padding: 6px 8px;
  background: var(--bg);
  border-radius: 6px;
}
@media (prefers-color-scheme: dark) { .control-items-fila .control-items-total { color: #fff; } }

.control-aiu-box {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin: 10px 0;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
}
.control-aiu-box label { margin: 0; font-size: 12.5px; }
.control-aiu-box input { width: 90px; margin-top: 4px; }

.control-btn-secundario {
  display: inline-block;
  background: none;
  border: 1.5px solid var(--cinco-navy);
  color: var(--cinco-navy);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
}
.control-btn-secundario:hover { background: rgba(31, 39, 50, 0.06); }
.control-btn-secundario:disabled { opacity: 0.6; cursor: default; }
@media (prefers-color-scheme: dark) {
  .control-btn-secundario { border-color: #fff; color: #fff; }
  .control-btn-secundario:hover { background: rgba(255, 255, 255, 0.08); }
}

/* Utilidad "ocultar" — a propósito al final del archivo: con la misma
   especificidad (una sola clase) que muchas reglas de componentes de
   arriba (ej. .control-equipo-form { display: flex }), el desempate de
   CSS lo gana quien aparezca último en el archivo. Si esta regla quedara
   más arriba, un elemento con ambas clases (ej. "control-equipo-form
   oculto") se mostraría igual pese a "oculto". */
.oculto { display: none; }

/* ======================================================================
   Tipografía moderna del módulo interno (web/control/*, <body
   class="app-control">). Poppins se veía pesada en tarjetas y tablas
   densas; aquí se usan dos familias variables autoalojadas (la CSP solo
   permite font-src 'self'):
   - Plus Jakarta Sans: títulos, nombres de tarjetas, encabezados de tabla
     y botones — geométrica y estilizada.
   - Inter: textos, valores y celdas — muy legible en tamaños chicos.
   El sitio público (index, servicios...) conserva Poppins de marca.
   ====================================================================== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-var.woff2") format("woff2-variations"), url("../fonts/inter-var.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-var.woff2") format("woff2-variations"), url("../fonts/plus-jakarta-sans-var.woff2") format("woff2");
}
body.app-control {
  --fuente-texto: "Inter", "Segoe UI", system-ui, sans-serif;
  --fuente-titulo: "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, sans-serif;
  font-family: var(--fuente-texto);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}
body.app-control h1,
body.app-control h2,
body.app-control h3,
body.app-control h4,
body.app-control .control-vp-titulo,
body.app-control .control-vp-grupo-titulo,
body.app-control table.control-tabla-documentos th,
body.app-control table.control-tabla-cambios th,
body.app-control .control-btn-mini,
body.app-control .btn,
body.app-control .btn-outline,
body.app-control summary {
  font-family: var(--fuente-titulo);
}
body.app-control h1, body.app-control h2 { font-weight: 700; letter-spacing: -0.02em; }
body.app-control h3, body.app-control h4 { font-weight: 650; letter-spacing: -0.01em; }

/* Tarjeta de vista previa: título grande más liviano, nombres de tarjeta
   con más aire entre letras, etiquetas discretas y valores en Inter
   semibold (antes todo iba en 700-800 y se sentía "gritado"). */
body.app-control .control-vista-previa .control-vp-titulo { font-weight: 700; font-size: 17px; line-height: 1.35; letter-spacing: -0.015em; }
body.app-control .control-vista-previa .control-vp-grupo-titulo { font-weight: 700; font-size: 10.5px; letter-spacing: 0.09em; }
body.app-control .control-vista-previa .control-vp-etiqueta { font-weight: 600; font-size: 9.5px; letter-spacing: 0.06em; }
body.app-control .control-vista-previa .control-vp-valor { font-weight: 600; font-size: 13px; letter-spacing: -0.005em; }

/* Tablas: encabezados en Jakarta con tracking amplio; celdas en Inter
   regular, un punto más grandes para que respiren. */
body.app-control table.control-tabla-documentos th,
body.app-control table.control-tabla-cambios th { font-weight: 700; font-size: 10.5px; letter-spacing: 0.08em; }
body.app-control table.control-tabla-documentos td { font-size: 13px; font-weight: 400; }

/* Barra superior, botones y campos. */
body.app-control .control-userbar { font-weight: 500; }
body.app-control .control-userbar-link { font-size: 13px; font-weight: 500; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.app-control .control-btn-mini { font-weight: 600; font-size: 12px; letter-spacing: 0.005em; }
body.app-control input,
body.app-control select,
body.app-control textarea { font-family: var(--fuente-texto); font-size: 13.5px; }

/* ---- Cabecera fija del módulo interno (js/control/control-ui.js):
   menú + franja de la página + barra de acciones siempre visibles al
   bajar. La franja (.page-banner) pasa a ser compacta: título y
   descripción en una sola línea, para no robar espacio a la lista. ---- */
body.app-control .control-cabecera-fija {
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 6px 18px rgba(18, 22, 29, 0.10);
}
body.app-control .control-cabecera-fija .site-header { position: static; }
body.app-control .page-banner { padding: 12px 0 13px; text-align: left; }
body.app-control .page-banner .container {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 2px;
}
body.app-control .page-banner .eyebrow { font-size: 10.5px; letter-spacing: 0.14em; margin: 0; }
body.app-control .page-banner h1 { font-size: 22px; line-height: 1.2; }
body.app-control .page-banner p { margin: 0; max-width: none; font-size: 13px; color: #aab2bd; }

/* Barra de acciones: botón "Nuevo" + filtros en una sola fila. */
body.app-control .control-barra-acciones {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
body.app-control .control-barra-acciones-interior {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding-top: 10px; padding-bottom: 10px;
}
body.app-control .control-barra-acciones .control-filtros-lista,
body.app-control .control-barra-acciones .control-filtros { flex: 1 1 520px; margin: 0; }
body.app-control .control-barra-acciones .control-filtros { gap: 14px; }
body.app-control .control-oculto-por-origen { display: none !important; }
/* El primer bloque de la página ya no necesita tanto margen arriba. */
body.app-control section.section { padding-top: 22px; }

/* Botón "Nuevo…": vistoso pero sobrio — ámbar de marca, texto navy en
   peso medio, un poco más grande que los botones chicos, sombra suave. */
body.app-control .control-btn-nuevo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffc23a 0%, var(--cinco-amber) 100%);
  color: var(--cinco-navy-dark);
  font-family: var(--fuente-titulo);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.005em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 4px 12px rgba(217, 148, 0, 0.28);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
body.app-control .control-btn-nuevo:hover {
  background: linear-gradient(180deg, #ffc94f 0%, #f5a800 100%);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 6px 16px rgba(217, 148, 0, 0.34);
}
body.app-control .control-btn-nuevo:focus-visible { outline: 2px solid var(--cinco-navy); outline-offset: 2px; }

/* Al recorrer la lista con las flechas, o al saltar al formulario de
   "Nuevo", que lo seleccionado no quede debajo de la cabecera fija. */
body.app-control table.control-tabla-seleccionable tbody tr { scroll-margin-top: calc(var(--alto-cabecera, 0px) + 40px); scroll-margin-bottom: 16px; }
body.app-control details.control-nuevo { scroll-margin-top: calc(var(--alto-cabecera, 0px) + 12px); }

@media (max-width: 700px) {
  body.app-control .page-banner p { display: none; }
  body.app-control .control-cabecera-fija { position: static; }
}