/* ══════════════════════════════════════════════════════════════════════════════
   REDISEÑO (modelo de Irene, 28-sep-2026) — SOLO EL MARCO COMÚN
   Barra superior blanca + navegación lateral plegable + menú de usuario + footer
   + página "Quiénes somos".

   Reglas de esta hoja:
   - Se carga DESPUÉS de css/app.css y solo pisa el marco (topbar / sidebar /
     items / footer / página nueva). El contenido de los módulos (Ganado,
     Datos de Campo, matrices, tablas…) NO se toca.
   - Escritorio: ancho mínimo 1100 px y ningún texto por debajo de 11 px.
   - El CHAT queda como está hoy (burbuja flotante + minimizar): decisión de
     Eduarbo del 28-sep-2026 (el paquete de Irene proponía panel superpuesto).
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Irene: el menú lateral mide 255 px. La variable --sidebar-w (app.css) es la que
     usa el margen del contenido para "empujarlo", así que se alinea acá. */
  --sidebar-w: 255px;
  --rd-ink: #082d22;
  --rd-green: #008564;
  --rd-green-dark: #065c48;
  --rd-muted: #6b7f98;
  --rd-line: #e2e9ef;
  --rd-active-bg: #edfdf5;
  --rd-wash: radial-gradient(ellipse at 69% 62%, #f2f3ce 0%, transparent 46%),
             linear-gradient(130deg, #e8f5ea, #f2f8e8 48%, #c9e7cc);
}

/* ── Tipografía base (Irene: Arial con Georgia en títulos, contenido 14-18 px,
      nunca por debajo de 11 px) ─────────────────────────────────────────────── */
body { font-family: Arial, Helvetica, sans-serif; }
body, button, input, select, textarea { font-size: 16px; }
.section-title, .version-badge, small, .hint, .muted,
/* 29-sep-2026 (Eduarbo): TEXTO IGUAL QUE ANTES (el agrandado era para la flecha, no para
   el texto). Los emojis del menú se quitaron. La flecha ▾ se queda: avisa que hay submenú. */
.topbar .link, .nav-item, .cat-head { font-size: max(11px, 1em); }
.cat-icon, .nav-icono { display: none; }

/* ── Barra superior ──────────────────────────────────────────────────────── */
.topbar {
  height: 84px;
  background: #fff;
  border-bottom: 1px solid var(--rd-line);
  box-shadow: none;
  color: var(--rd-ink);
}
/* OJO: app.css centra la barra (el .topbar es flex y el inner lleva margin:auto),
   así que hay que forzar ancho completo, si no la marca queda flotando al medio. */
.topbar { display: flex; align-items: center; }
.topbar-inner { max-width: none; width: 100%; margin: 0; padding: 0 34px; gap: 18px; }
.topbar .logo { display: flex; align-items: center; gap: 12px; height: 84px; }
.brand-text { display: flex; flex-direction: column; justify-content: center; }
.brand-name { font-size: 23px; font-weight: 700; letter-spacing: -1px; color: var(--rd-ink); }
.version-badge {
  font-size: 11px; background: #eef4f1; border: 1px solid var(--rd-line);
  border-radius: 8px; padding: 2px 8px; color: #5c6b60; margin-left: 4px;
}
.topbar .logo, .topbar .logo span { color: var(--rd-ink); font-size: 23px; letter-spacing: -1px; }
.topbar .logo .logo-mark {
  font-size: 26px; color: var(--rd-green); border: 1px solid #a5ebcf;
  border-radius: 17px; background: #eefcf5; padding: 2px 10px; margin-right: 10px;
}
.topbar .logo .tagline { display: block; color: var(--rd-muted); font-size: 12px; letter-spacing: 0; margin-top: 2px; }
/* OJO: en la barra oscura anterior estos elementos eran claros; sobre blanco hay que
   oscurecerlos o quedan invisibles (☰ y el título de sección). */
.hamburguesa { color: #7c8792; font-size: 26px; }
.section-title { color: var(--rd-muted); font-size: 13px; }
/* OJO (hallazgo 28-sep-2026): el selector de cuenta venía con texto BLANCO y fondo
   casi transparente (era para la barra verde) → sobre la barra blanca quedaba
   INVISIBLE y un usuario con dos cuentas no podía cambiar de cuenta. */
.cuenta-select {
  width: auto; max-width: 230px; padding: 6px 10px; font-size: 13px;
  background: #f4fbf7; color: var(--rd-ink); border: 1px solid #aed2c2;
  border-radius: 8px; font-family: inherit; cursor: pointer;
}
.cuenta-select:hover { background: #e6f6ed; border-color: var(--rd-green); }
.topbar-user { gap: 16px; }
.topbar-user .link { color: var(--rd-green-dark); }
.user-chip {
  background: #f4fbf7; border: 1px solid #aed2c2; color: var(--rd-ink);
  font-size: 14px; padding: 7px 14px; gap: 8px;
}
.user-chip:hover { background: #e6f6ed; border-color: var(--rd-green); }
/* Sobre la barra oscura anterior estos textos eran verde claro: sobre blanco hay que
   oscurecerlos o quedan lavados. */
.user-chip .uc-rol { color: #3f6b5c; font-size: 12px; }
.user-chip .uc-cuenta { color: #5b7a8f; font-size: 12px; }
/* Desplegable de usuario (Irene: Configuración, Potreros, Predios) */
.user-menu {
  position: absolute; right: 110px; top: 76px; width: 210px; z-index: 80;
  background: #fff; border: 1px solid var(--rd-green); border-radius: 14px;
  overflow: hidden; box-shadow: 0 12px 30px #0b3d2a26;
}
.user-menu button {
  display: block; width: 100%; text-align: left; padding: 14px 18px;
  background: none; border: 0; border-bottom: 1px solid #eaf3ee;
  color: #276556; font-size: 14px; cursor: pointer; font-family: inherit;
}
.user-menu button:last-child { border-bottom: 0; }
.user-menu button:hover { background: var(--rd-active-bg); }

/* ── Navegación lateral: plegable, empuja el contenido, se oculta del todo ── */
.sidebar {
  top: 84px;
  width: 255px;
  background: #fff;
  border-right: 1px solid #dce5e1;
  box-shadow: none;
}
.sidebar-nav { padding: 10px 0 28px; }
/* Irene: al ocultar el menú, el contenido ocupa TODO el ancho (no hay riel) */
body:not(.sidebar-open) .sidebar { width: 0; border-right: 0; overflow: hidden; }
body:not(.sidebar-open) .app-shell { margin-left: 0; }
body:not(.sidebar-open) .sidebar .cat-head { justify-content: flex-start; padding: 17px 18px; }
body:not(.sidebar-open) .sidebar .cat-icon { width: 18px; font-size: 16px; }
body:not(.sidebar-open) .sidebar .cat-label span:not(.cat-icon) { display: inline; }
body:not(.sidebar-open) .sidebar .cat-caret { display: block; }
.cat-head {
  font-size: 17px; color: var(--rd-green-dark); font-weight: 700;
  padding: 15px 18px; border: 0;
}
.cat-head:hover { background: #f4fbf7; }
.cat-icon { width: 18px; font-size: 16px; }
.nav-item {
  width: 96%; margin: 2px 2%; padding: 10px 16px; border-radius: 8px;
  font-size: 14px; color: #538b7c; border-left: 3px solid transparent;
}
.nav-item:hover { background: #f4fbf7; }
.nav-item.active, .nav-item.nav-item.active {
  background: var(--rd-active-bg); border-left-color: var(--rd-green);
  color: var(--rd-green-dark); font-weight: 700;
}
.nav-item.nav-directo { padding: 15px 18px; font-size: 17px; font-weight: 700; color: var(--rd-green-dark); }
.nav-item.nav-directo .nav-icono { width: 18px; font-size: 16px; }
.sidebar-backdrop { background: rgba(8, 45, 34, .28); }

/* ── Contenido y footer ──────────────────────────────────────────────────── */
.app-shell { padding-top: 84px; min-height: 100dvh; display: flex; flex-direction: column; }
.content { max-width: none; padding: 22px 34px 40px; }
.rd-footer {
  margin-top: auto; height: 80px; display: flex; align-items: center; gap: 14px;
  padding: 0 34px; background: #fff; border-top: 1px solid var(--rd-line);
  font-size: 12px; color: var(--rd-green);
}
.rd-footer b { color: var(--rd-green); }
.rd-footer .rd-right { margin-left: auto; color: #96a8be; display: flex; gap: 22px; }
.rd-footer .rd-right a { color: #96a8be; text-decoration: none; }
.rd-footer .rd-right a:hover { color: var(--rd-green); }

/* ── Página "Quiénes somos" (modelo de Irene; textos a validar) ──────────── */
.rd-about { background: #f5f4f2; color: var(--rd-ink); }
/* El hero: la foto casi CUADRADA de la primera entrega (2901x2687) se dibujaba como
   una franja de ~1.200 px de alto, así que se recortaba. Ese recorte ya no hace falta:
   llegó la panorámica (29-sep-2026) y la caja mide igual que la foto. Ver el bloque
   "HERO panorámico" más abajo. */
/* ── HERO panorámico (componente de Irene, entrega 29-sep-2026) ───────────────
   La foto entra COMPLETA: la caja mide lo mismo que la imagen (3:1 en escritorio,
   4:3 en celular), así que no hay recorte ni franjas. Se abandona la caja de 42vw de
   la vuelta anterior: con una foto casi cuadrada recortaba el 57%. El título y las
   etiquetas son texto HTML (en la entrega anterior venían quemados en la imagen). */
.rd-hero-wrap { position: relative; isolation: isolate; }
.rd-about .rd-hero {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  background: #eef2ef;   /* fondo mientras carga */
}
/* Velo oscuro desde la izquierda: da contraste al texto que va SOBRE la foto. */
.rd-hero-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,32,28,.89) 0%, rgba(8,32,28,.66) 33%,
                              rgba(8,32,28,0) 61%);
}
.rd-hero-texto {
  position: absolute; z-index: 1; top: 10%; bottom: 10%; left: 8%; width: 44%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  color: #fff;
}
.rd-hero-marca {
  margin: 0 0 .7em; color: #fff; font: 700 clamp(12px, 1.1vw, 22px)/1 Verdana, Tahoma, sans-serif;
  letter-spacing: .12em;
}
.rd-about .rd-hero-titulo {
  margin: 0 0 .5em; color: #fff; text-align: left;
  font-size: clamp(25px, 3.1vw, 84px); line-height: 1.04;
}
/* El h1 de la página es el del hero: el título de sección conserva el tamaño que
   tenía cuando era h1 (32 px). */
.rd-about .rd-titulo-seccion { font-size: 32px; }
.rd-hero-badges {
  display: flex; flex-wrap: wrap; gap: .45em; max-width: 95%;
  margin: 0; padding: 0; list-style: none;
}
.rd-hero-badges li {
  background: #f3f6ef; color: #183d32; border-radius: 999px;
  padding: .55em .8em; font-weight: 600; line-height: 1.3;
  font-size: clamp(10px, .77vw, 20px);
}
.rd-about picture { display: block; }
/* Las tres ilustraciones siguen en 267-308 px (las de 1200 px de la carpeta "assets"
   todavía no llegaron): se mantiene el tope de 300 px para que no se vean estiradas.
   Cuando lleguen los originales: tope a max-width 100% + <source> WebP en el markup. */
.rd-about .rd-roles img { max-width: 300px; margin: 0 auto; display: block; }
.rd-about .rd-body { padding: 45px 4% 70px; }
.rd-about h1, .rd-about h2, .rd-about h3 { font-family: Georgia, 'Times New Roman', serif; text-align: center; }
.rd-about h1 { font-size: 32px; margin: 0 0 26px; }
.rd-about h2 { font-size: 28px; }
.rd-about h3 { font-size: 24px; text-align: left; }
.rd-about .eyebrow { text-align: center; color: var(--rd-green); letter-spacing: 1px; font-size: 18px; margin-bottom: 12px; }
.rd-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 50px; margin: 30px 0 65px; }
.rd-role img { display: block; width: 100%; height: auto; }
.rd-role-head { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 17px; }
.rd-role-num {
  display: grid; place-items: center; flex: 0 0 52px; height: 52px;
  background: #496a51; color: #fff; border-radius: 50%; font: 700 32px Georgia, serif;
}
.rd-role-head h3 { font-size: 32px; margin: 0; display: flex; align-items: center; min-height: 52px; }
.rd-role-head p { margin: 0; color: #555; font-size: 17px; }
.rd-ribbon {
  display: grid; place-items: center; background: #8abea4; border-radius: 20px;
  font: italic 700 18px Georgia, serif; padding: 5px; margin: 14px 0 17px;
}
.rd-role > p { font-size: 17px; line-height: 1.4; color: #555; text-align: center; }
.rd-impact h3 { font-family: Georgia, serif; font-size: 24px; margin-bottom: 10px; }
.rd-impact p { color: #586981; font-size: 16px; line-height: 1.5; }
.rd-nota {
  margin: 30px auto 0; max-width: 900px; border: 1px solid #f9a825; background: #fff8e1;
  border-radius: 10px; padding: 10px 14px; font-size: 13px; color: #7a5210;
}

/* ── La página "Quiénes somos" en CELULAR (28-sep-2026) ──────────────────────
   El diseño de Irene es de escritorio: los tres roles iban en 3 columnas siempre,
   y en un celular eso los pisaba (números encima de los títulos). Acá se apilan,
   que es la única forma legible en 390 px. El hero se recorta un poco más para que
   la franja no se coma la pantalla — y así las etiquetas quemadas al pie de la
   imagen quedan fuera también en celular. */
@media (max-width: 767px) {
  /* Hero móvil (componente de Irene): el texto va en un BLOQUE verde ARRIBA y la foto
     completa debajo (4:3). Es a propósito: así el título no tapa a las personas ni se
     fuerza texto sobre una foto chica. En 700 px o menos los roles también se apilan. */
  .rd-hero-wrap { display: flex; flex-direction: column; background: #163e32; }
  .rd-hero-wrap::after { display: none; }
  /* OJO (29-sep-2026): el orden va en el <picture>, no en la <img> de adentro — la
     imagen tiene que quedar SEGUNDA, como pide el componente de Irene ("los textos
     aparecen en un bloque superior verde y la fotografía completa debajo"). */
  .rd-hero-wrap picture { order: 1; }
  .rd-about .rd-hero { aspect-ratio: 4 / 3; }
  .rd-hero-texto { position: static; order: 0; width: 100%; padding: 26px 8%; }
  .rd-about .rd-hero-titulo { font-size: clamp(28px, 7.8vw, 46px); }
  .rd-hero-marca { font-size: 13px; }
  .rd-hero-badges { font-size: 12px; max-width: 100%; }
  .rd-about .rd-titulo-seccion { font-size: 25px; }
  .rd-about .rd-body { padding: 26px 5% 46px; }
  .rd-about h1 { font-size: 25px; }
  .rd-about h2 { font-size: 21px; }
  .rd-about h3 { font-size: 19px; }
  .rd-roles { grid-template-columns: 1fr; row-gap: 30px; column-gap: 0; margin: 22px 0 40px; }
  .rd-role img { max-width: 260px; }
  .rd-role-head { justify-content: center; }
  .rd-role-num { flex: 0 0 44px; height: 44px; font-size: 24px; }
  .rd-role-titles h3, .rd-about .rd-role h3 { text-align: left; }
  .rd-about .rd-role > p, .rd-about .rd-role-titles p { text-align: left; }
}

/* ── 29-sep-2026: flecha del submenú 2x (pedido de Eduarbo) ── */
.sidebar .cat-caret {
  font-size: 36px;      /* medía 16px: queda 2,25x */
  line-height: 1;
  display: flex;
  align-items: center;
  color: var(--rd-green-dark, #1b5e3a);
}

/* ── 30-sep-2026 · CU 2.54 / RQ-197: ANIMALES por especie ──────────────────────
   Dentro de la categoría Animales, "Bovinos" y "Ovinos" son grupos con su propia
   etiqueta (el pliegue sigue siendo uno: el de la categoría). Van en tipo oración,
   como el resto de los títulos del menú. */
/* 01-oct-2026 (Eduarbo: "destaca visualmente un poco mas los submenu de especie Ovino y
   Bovino"): el grupo de especie pesa MAS que un item y menos que la categoria — fondo
   suave, barra de acento a la izquierda y el verde del tema. Sigue SIN emoji y en tipo
   oracion (los dos pedidos del 28/29-sep). Antes era un gris chico que casi no se veia. */
.sidebar .sub-cat {
  margin: 10px 10px 2px;
  padding: 7px 10px 7px 9px;
  border-left: 3px solid var(--rd-green);
  border-radius: 6px;
  background: #f1f6f3;
  font-size: max(12px, .86em);
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--rd-green-dark);
}

/* ── 30-sep-2026 · CU 2.49: pantalla de ovinos (majadas) ─────────────────────── */
.maj-lista { margin: 12px 0 20px; }
.maj-bloque { margin-bottom: 18px; }
.maj-bloque h3 { font-size: 17px; margin: 4px 0 8px; }
.maj-alta {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  border: 1px solid var(--borde, #dde3e0); border-radius: 10px;
  padding: 14px; background: var(--card, #fff);
}
.maj-alta h3 { width: 100%; margin: 0; font-size: 17px; }
.maj-campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #4a5551; }
.maj-campo input, .maj-campo select {
  padding: 8px 10px; border-radius: 8px; border: 1px solid #cfd8d3;
  font-size: 14px; min-width: 150px; font-family: inherit;
}
.maj-acciones { display: flex; gap: 8px; }
.maj-acciones button { padding: 9px 16px; border-radius: 8px; cursor: pointer; }
/* CU 2.52 (30-sep-2026): equivalencia UG del ovino — dato de la cuenta, editable
   por el productor (Titular) al lado de lo que mide. */
.maj-ug { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 6px 0 14px; }
.maj-ug input { width: 110px; }
.maj-ug button { padding: 8px 14px; border-radius: 8px; cursor: pointer; }
.majadas-acciones button.mini { padding: 4px 10px; font-size: 12px; margin-right: 6px; border-radius: 7px; cursor: pointer; }
button.mini.peligro { background: #b3261e; color: #fff; border-color: #b3261e; }

/* CU 2.50 (30-sep-2026): trabajos de ovinos — estado del tiempo de espera. */
.tra-pend { color: #8a4b00; font-weight: 600; }
.tra-ok { color: #1b5e3a; }
.tra-pend small, .tra-ok small { font-weight: 400; opacity: .85; }
.tabla-scroll { overflow-x: auto; }
.tabla-scroll table { width: 100%; border-collapse: collapse; }
.tabla-scroll th, .tabla-scroll td { text-align: left; padding: 7px 9px; border-bottom: 1px solid #e6ebe8; }
.tabla-scroll th { font-size: 13px; color: #5c6b66; font-weight: 600; }

/* CU 2.55 (30-sep-2026): evidencia de apoyo del trabajo de ovinos (no certificación). */
.evid-fila td.evid-celda { background: #f7faf8; border: 1px solid #e0e7e3; border-radius: 10px; }
.evid-titulo { font-weight: 700; font-size: 13.5px; color: #3d4a45; margin: 2px 0 8px; }
.evid-lista { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.evid-item { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #e2e8e5;
  border-radius: 8px; padding: 5px 8px; }
.evid-foto { max-height: 74px; max-width: 130px; border-radius: 6px; }
.evid-subir { display: flex; align-items: flex-end; }
.evid-subir input[type=file] { font-size: 12.5px; }