/* ===== Base & variables ===== */
:root {
  --color-bg: #faf7f2;
  --color-surface: #ffffff;
  --color-primary: #1f4b43;
  --color-primary-dark: #143530;
  --color-accent: #c9a24b;
  --color-accent-light: #e4c988;
  --color-text: #23302c;
  --color-text-muted: #5c6b65;
  --color-border: #e4ddd0;

  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  --max-width: 1140px;
  --radius: 14px;
  --shadow-sm: 0 4px 16px rgba(20, 40, 35, 0.08);
  --shadow-md: 0 12px 32px rgba(20, 40, 35, 0.14);
  --transition: 0.25s ease;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

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

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 8px;
}

section {
  padding: 90px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.section-heading {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 48px;
}

.section-heading h2 {
  font-size: 34px;
  margin-bottom: 12px;
}

.section-heading p {
  color: var(--color-text-muted);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  cursor: pointer;
  border: 1.5px solid transparent;
}

.btn-primary {
  background: var(--color-accent);
  color: #2a2110;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--color-accent-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* ===== Header ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
}

.site-header.scrolled {
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}

.nav-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  color: #fff;
  transition: color var(--transition);
}

.site-header.scrolled .brand-name {
  color: var(--color-primary-dark);
}

.nav-buttons {
  display: flex;
  gap: 32px;
}

.nav-buttons a {
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.site-header.scrolled .nav-buttons a {
  color: var(--color-text);
}

.nav-buttons a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: #fff;
  transition: background var(--transition);
}

.site-header.scrolled .nav-toggle span {
  background: var(--color-text);
}

/* ===== Hero ===== */
.hero {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  background: linear-gradient(135deg, #1f4b43 0%, #143530 55%, #0d241f 100%);
  background-image: url("../images/hero/atardecer-alberca.jpg");
  background-size: cover;
  background-position: center 30%;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Oscurece la foto para que el texto siga siendo legible, conservando el tono verde/dorado de la marca */
  background-image: linear-gradient(160deg, rgba(20, 53, 48, 0.55) 0%, rgba(13, 36, 31, 0.75) 100%),
                     radial-gradient(circle at 20% 20%, rgba(201, 162, 75, 0.2), transparent 45%),
                     radial-gradient(circle at 80% 75%, rgba(201, 162, 75, 0.14), transparent 50%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  color: #fff;
}

.hero-kicker {
  color: var(--color-accent-light);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 16px;
}

.hero h1 {
  font-size: clamp(40px, 7vw, 68px);
  color: #fff;
  margin-bottom: 20px;
}

.hero-text {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 36px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.75);
  font-size: 22px;
  animation: bob 2.2s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* ===== Gallery ===== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 200px);
  gap: 20px;
}

.gallery-item--wide {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-item {
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  font-family: inherit;
  transition: box-shadow var(--transition);
}

.gallery-item:hover,
.gallery-item:focus-visible {
  box-shadow: var(--shadow-md);
}

.gallery-item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.gallery-thumb {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}

.gallery-item:hover .gallery-thumb {
  transform: scale(1.06);
}

.thumb-1 {
  background-image: url("../images/galeria/alberca-tobogan.jpg");
}

.thumb-2 {
  background-image: url("../images/galeria/areas-verdes.jpg");
}

.thumb-3 {
  background-image: url("../images/galeria/fachada-departamentos.jpg");
}

.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 18px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  color: #fff;
  font-weight: 600;
  text-align: left;
}

.gallery-caption em {
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  color: var(--color-accent-light);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition), transform var(--transition);
}

.gallery-item:hover .gallery-caption em,
.gallery-item:focus-visible .gallery-caption em {
  opacity: 1;
  transform: translateX(0);
}

/* ===== Amenities ===== */
.amenities {
  background: var(--color-surface);
  border-radius: 32px;
  margin: 40px auto;
}

.amenities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.amenity-card {
  padding: 32px 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-align: left;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.amenity-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.amenity-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(31, 75, 67, 0.08);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.amenity-icon svg {
  width: 24px;
  height: 24px;
}

.amenity-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.amenity-card p {
  color: var(--color-text-muted);
  font-size: 14.5px;
}

/* ===== Contact ===== */
.contact-card {
  background: var(--color-primary);
  border-radius: 28px;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.contact-info {
  padding: 56px 48px;
}

.contact-info h2 {
  color: #fff;
  font-size: 30px;
  margin: 6px 0 14px;
}

.contact-info p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 24px;
}

.contact-details {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
}

.contact-form {
  background: var(--color-surface);
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--color-text);
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.contact-form input,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  resize: vertical;
  transition: border-color var(--transition);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.contact-form .btn {
  align-self: flex-start;
  margin-top: 4px;
}

.form-note {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 14px;
}

/* ===== Footer ===== */
.site-footer {
  text-align: center;
  padding: 40px 24px 32px;
  color: var(--color-text-muted);
  font-size: 14px;
}

.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

.footer-brand .brand-name {
  color: var(--color-primary-dark);
}

/* ===== Páginas de detalle (Alberca / Áreas verdes / Departamentos) ===== */
.page-banner {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  /* Espacio para que el header fijo (~68px, una sola fila) no tape el título. */
  padding: 112px 24px 48px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 36, 31, 0.55) 0%, rgba(13, 36, 31, 0.82) 100%);
}

.page-banner-content {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  color: #fff;
}

.page-banner .eyebrow {
  color: var(--color-accent-light);
}

.page-banner h1 {
  color: #fff;
  font-size: clamp(32px, 5vw, 48px);
  margin: 4px 0 12px;
}

.page-banner-lead {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 16.5px;
}

.back-link {
  position: relative;
  z-index: 1;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 18px;
  transition: color var(--transition);
}

.back-link:hover {
  color: #fff;
}

.detail-sections {
  padding-top: 80px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.detail-block {
  display: flex;
  align-items: center;
  gap: 48px;
}

.detail-block.is-reverse {
  flex-direction: row-reverse;
}

.detail-media,
.detail-text {
  flex: 1 1 0;
  min-width: 0;
}

.detail-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.detail-text h2 {
  font-size: 28px;
  margin: 4px 0 14px;
}

.detail-text p {
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feature-list li {
  padding-left: 22px;
  position: relative;
  font-size: 14.5px;
  color: var(--color-text);
}

.feature-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

.detail-cta {
  text-align: center;
  padding: 40px 24px 96px;
}

.detail-cta p {
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

/* ===== Scroll reveal ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Responsive ===== */
@media (max-width: 860px) {
  .amenities-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  section {
    padding: 64px 20px;
  }

  .nav-toggle {
    display: flex;
  }

  .portal-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
    background: var(--color-primary-dark);
    box-shadow: var(--shadow-md);
  }

  .portal-nav.open {
    max-height: 360px;
    overflow-y: auto;
    padding: 8px 12px 16px;
  }

  .portal-nav a {
    border-radius: 0;
    padding: 13px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .portal-nav a.is-active {
    background: rgba(255, 255, 255, 0.08);
  }

  .nav-user-text {
    display: none;
  }

  .portal-header-actions {
    gap: 10px;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .gallery-item--wide {
    grid-column: 1;
    grid-row: auto;
  }

  .gallery-item {
    height: 220px;
  }

  .amenities-grid {
    grid-template-columns: 1fr;
  }

  .contact-info,
  .contact-form {
    padding: 36px 28px;
  }

  .detail-block,
  .detail-block.is-reverse {
    flex-direction: column;
    gap: 24px;
  }

  .detail-sections {
    padding-top: 56px;
    gap: 48px;
  }

  .page-banner {
    padding: 100px 20px 36px;
  }
}

/* ===================================================================
   Portal privado (propietarios / comité administrativo)
   =================================================================== */

/* ===== Header del portal: una sola fila, a todo el ancho ===== */
.site-header.portal-header {
  background: linear-gradient(135deg, #1f4b43 0%, #143530 100%);
  box-shadow: 0 6px 24px rgba(13, 36, 31, 0.28);
  backdrop-filter: none;
}

/* El .nav-wrap normal está limitado a var(--max-width) y centrado — aquí se
   anula para que el header aproveche todo el ancho de la pantalla y no se
   vea apretado con marca + nav + usuario + salir todo junto. */
.portal-header .nav-wrap {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 14px 32px;
  gap: 24px;
}

.portal-header .brand {
  flex-shrink: 0;
}

.site-header.scrolled.portal-header .brand-name {
  /* Selector con el mismo "peso" que .site-header.scrolled .brand-name (la
     regla que ponía este texto en verde oscuro) para poder ganarle. */
  color: #fff;
}

.portal-header .brand-name {
  /* Dorado se perdía contra el verde oscuro; blanco da el mayor contraste posible. */
  color: #fff;
}

.portal-header .logo {
  background: var(--color-accent);
  color: #fff;
  text-shadow: 0 1px 2px rgba(20, 53, 48, 0.4);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.22);
}

.site-header.portal-header .nav-toggle span {
  background: #fff;
}

.portal-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Usuario: avatar con inicial + nombre/rol */
.nav-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Cuando es un link (comité administrativo, va a "Mi cuenta") */
a.nav-user {
  text-decoration: none;
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  transition: background var(--transition);
}

a.nav-user:hover {
  background: rgba(255, 255, 255, 0.08);
}

.nav-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(201, 162, 75, 0.45);
  color: var(--color-accent-light);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-user-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.nav-user-nombre {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.nav-user-rol {
  font-size: 12px;
  color: var(--color-accent-light);
}

.nav-logout-form {
  display: inline-flex;
}

.nav-logout-btn {
  font-family: inherit;
  font-weight: 600;
  font-size: 13.5px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.nav-logout-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-accent);
  color: #fff;
}

/* Nav: segmento central de la misma fila, centrado y repartido en el
   espacio que sobra entre la marca y el bloque de usuario/salir. */
.portal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 4px;
  flex-wrap: wrap;
}

.portal-nav a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--transition), background var(--transition);
}

.portal-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.portal-nav a.is-active {
  color: #fff;
  background: rgba(201, 162, 75, 0.28);
}

/* Banner de páginas internas del portal (Avisos, Instalaciones, Comité,
   Usuarios, Mi cuenta...): misma foto + degradado oscuro que las
   páginas de detalle de Instalaciones, para que ninguna pantalla del portal
   se sienta "vacía" con solo un color plano de fondo. */
.page-banner--plain {
  background-image: url("../images/galeria/alberca-infinita.jpg");
  background-position: center 78%;
  min-height: 30vh;
  align-items: center;
}

/* Encabezado corto del panel — mismo tratamiento que .page-banner. */
.panel-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-image: url("../images/galeria/alberca-infinita.jpg");
  background-size: cover;
  background-position: center 78%;
  /* Mismo motivo que .page-banner: espacio para el header fijo. */
  padding: 112px 24px 40px;
  color: #fff;
}

.panel-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 36, 31, 0.55) 0%, rgba(13, 36, 31, 0.82) 100%);
}

.panel-hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
}

.panel-hero h1 {
  color: #fff;
  font-size: 32px;
  margin: 4px 0 0;
}

.panel-hero .eyebrow {
  color: var(--color-accent-light);
}

/* Tarjetas de resumen del dashboard */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 16px;
}

.dashboard-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.dashboard-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.dashboard-card h2 {
  font-size: 24px;
  margin: 6px 0 10px;
}

.dashboard-card p {
  color: var(--color-text-muted);
  margin-bottom: 18px;
}

.dashboard-card--alerta {
  border-color: #d98a5f;
  background: #fdf3ec;
}

.dashboard-card--ok {
  border-color: #7fae8f;
  background: #f1f8f3;
}

.btn-ghost-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
  transition: background var(--transition), color var(--transition);
}

.btn-ghost-light:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Tabla de pagos */
.tabla-wrap {
  overflow-x: auto;
  margin-bottom: 40px;
}

.tabla-pagos {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.tabla-pagos th,
.tabla-pagos td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14.5px;
}

.tabla-pagos th {
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tabla-pagos tbody tr:last-child td {
  border-bottom: none;
}

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.badge--alerta {
  background: #fdf3ec;
  color: #a15a2e;
}

.badge--ok {
  background: #f1f8f3;
  color: #2f6b45;
}

/* Formulario dentro de tarjeta (agregar movimiento / nueva publicación) */
.form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}

.form-card h2 {
  font-size: 22px;
  margin: 4px 0 20px;
}

.form-separador {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 4px 0;
}

.form-nota {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: -8px 0 -6px;
}

/* .contact-form ya trae su propio fondo/padding (pensado para la sección de
   contacto); dentro de .form-card se anula para no duplicar la "caja". */
.form-card .contact-form {
  background: none;
  padding: 0;
}

.form-card .contact-form select {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
}

/* Tabs de categoría en Avisos */
.categoria-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}

.categoria-tab {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.categoria-tab:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.categoria-tab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.categoria-tab-cta {
  margin-left: auto;
  padding: 8px 18px;
}

/* Tarjetas de publicaciones (feed de avisos) */
.publicaciones-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}

/* Vista previa de "Últimos avisos" en el panel de inicio: 2 columnas, a
   diferencia de la lista completa (.publicaciones-list) de /panel/avisos,
   que va a lo largo en una sola columna. */
.publicaciones-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.publicacion-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px 32px;
  box-shadow: var(--shadow-sm);
}

/* Vista previa de "Últimos avisos" en el panel de inicio: toda la tarjeta
   es un link hacia el aviso completo (con imágenes) en /panel/avisos. */
.publicacion-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.publicacion-card-link .publicacion-card {
  height: 100%;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.publicacion-card-link:hover .publicacion-card,
.publicacion-card-link:focus-visible .publicacion-card {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Al llegar desde ese link (o cualquier otro anchor #aviso-X), resalta la
   tarjeta un momento para que sea fácil ubicarla en la lista completa. */
.publicacion-card:target {
  animation: publicacion-card-resaltada 1.6s ease;
}

@keyframes publicacion-card-resaltada {
  0% { box-shadow: 0 0 0 3px var(--color-accent); }
  100% { box-shadow: var(--shadow-sm); }
}

.publicacion-card h3 {
  font-size: 19px;
  margin: 8px 0 10px;
}

.publicacion-card p {
  color: var(--color-text);
  margin-bottom: 4px;
  /* Sin esto, una palabra larga sin espacios (o un pegote de texto sin
     puntuación) se salía de la tarjeta en vez de partirse de línea. */
  overflow-wrap: break-word;
  word-break: break-word;
}

.publicacion-card footer {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.publicacion-editada {
  margin: 6px 0 0;
  font-size: 12px;
  font-style: italic;
  color: var(--color-text-muted);
}

/* Botón de eliminar (usuarios, publicaciones): sutil hasta que se pasa el mouse */
.btn-eliminar {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  background: none;
  border: 1.5px solid var(--color-border);
  color: #a15a2e;
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.btn-eliminar:hover {
  background: #fdf3ec;
  border-color: #a15a2e;
}

/* Par de "Eliminar": mismo look, en el color de marca en vez de rojizo.
   (.back-link es blanco/translúcido — pensado para ir sobre el banner
   oscuro; reusarlo sobre una tarjeta blanca lo dejaba invisible). */
.btn-editar {
  display: inline-block;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  background: none;
  border: 1.5px solid var(--color-border);
  color: var(--color-primary);
  border-radius: 999px;
  padding: 5px 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.btn-editar:hover {
  background: var(--color-bg);
  border-color: var(--color-primary);
}

/* Variante de .back-link para usarla sobre fondo claro (el original es
   blanco translúcido, pensado para ir sobre el banner verde oscuro). */
.back-link--dark {
  color: var(--color-primary);
}

.back-link--dark:hover {
  color: var(--color-accent);
}

.tabla-acciones {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

.publicacion-categoria {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
  /* Look por default para una categoría "Otra" (libre) que no tiene su
     propio color más abajo — financiero/mejora/aviso lo sobreescriben. */
  background: #eef0ee;
  color: var(--color-text-muted);
}

.publicacion-categoria--financiero {
  background: #eaf1ee;
  color: var(--color-primary);
}

.publicacion-categoria--mejora {
  background: #fbf1de;
  color: #8a6a2f;
}

.publicacion-categoria--aviso {
  background: #f1eef8;
  color: #5b4a8a;
}

/* Pantalla de login */
.login-screen {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
  background: #143530; /* respaldo mientras carga la foto */
}

/* Foto de fondo con un zoom lentísimo en loop (técnica "Ken Burns"), para
   que la pantalla de login se sienta viva en vez de una tarjeta flotando
   sobre un color plano. */
.login-screen::before {
  content: '';
  position: absolute;
  inset: -20px;
  background-image: url("../images/hero/atardecer-alberca.jpg");
  background-size: cover;
  background-position: center 35%;
  animation: login-fondo-zoom 26s ease-in-out infinite alternate;
}

.login-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 36, 31, 0.72) 0%, rgba(13, 36, 31, 0.88) 100%);
}

@keyframes login-fondo-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}

.login-card {
  position: relative;
  z-index: 1;
  background: var(--color-surface);
  border-radius: 20px;
  padding: 48px 40px;
  max-width: 380px;
  width: 100%;
  box-shadow: var(--shadow-md);
  text-align: center;
  animation: login-card-entrada 0.6s ease-out;
}

@keyframes login-card-entrada {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .login-screen::before {
    animation: none;
  }
  .login-card {
    animation: none;
  }
}

.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}

.login-sub {
  color: var(--color-text-muted);
  font-size: 14px;
  margin-bottom: 28px;
}

.login-error {
  background: #fdf3ec;
  color: #a15a2e;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  margin-bottom: 20px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.login-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.login-form input {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--transition);
}

.login-form input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.login-submit {
  margin-top: 4px;
  width: 100%;
}

/* Responsive: portal */
@media (max-width: 860px) {
  .dashboard-grid,
  .publicaciones-grid {
    grid-template-columns: 1fr;
  }

  /* Un poco antes de colapsar todo a hamburguesa (700px), se libera espacio
     ocultando el nombre/rol y dejando solo el avatar — así el nav respira. */
  .nav-user-text {
    display: none;
  }

  .portal-header .nav-wrap {
    padding: 14px 20px;
    gap: 14px;
  }

  .portal-nav {
    gap: 2px;
  }

  .portal-nav a {
    padding: 8px 12px;
    font-size: 14px;
  }
}

@media (max-width: 700px) {
  .categoria-tab-cta {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }

  .publicacion-card {
    padding: 22px 20px;
  }

  .publicacion-imagen {
    height: 240px;
  }

  .publicacion-imagenes.imagenes-multiples {
    grid-template-columns: 1fr;
  }

  .publicacion-imagenes.imagenes-multiples .publicacion-imagen {
    height: 200px;
  }

  .login-card {
    padding: 36px 26px;
  }
}

/* ===================================================================
   Portal de noticias: globito de avisos, "Nuevo", archivos, paginación
   =================================================================== */

/* Globito de conteo junto a "Avisos" en el nav */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 700;
}

/* Etiqueta "Nuevo" en una publicación que el usuario no había visto */
.publicacion-nueva {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* Editar/Eliminar juntos en el pie de cada tarjeta */
.publicacion-acciones {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Lista de archivos adjuntos dentro de una publicación */
.publicacion-archivos {
  list-style: none;
  margin: 6px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Vista previa de las imágenes adjuntas (jpg/png) — el resto (ej. PDF)
   se queda como link de descarga en .publicacion-archivos. Estilo "post":
   grandes, no miniaturas. Una sola imagen ocupa todo el ancho; con 2 o más
   se acomodan en cuadrícula, como en Facebook/Instagram. */
.publicacion-imagenes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 14px 0 6px;
}

.publicacion-imagenes.imagenes-multiples {
  grid-template-columns: repeat(2, 1fr);
}

.publicacion-imagen {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--color-border);
}

.publicacion-imagenes.imagenes-multiples .publicacion-imagen {
  height: 240px;
}

/* El <img> ahora va dentro de un <button> (abre el lightbox) en vez de un
   <a> que descargaba directo — se le quita todo el estilo de botón nativo. */
.publicacion-imagen-btn {
  display: block;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  width: 100%;
  height: 100%;
}

/* ===== Lightbox: imagen completa + botón real de descarga ===== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(13, 24, 21, 0.88);
}

.lightbox-overlay[hidden] {
  display: none;
}

.lightbox-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 100%;
}

.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  transform-origin: center center;
}

.lightbox-close {
  position: fixed;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Archivos ya adjuntos, mostrados en el formulario de edición */
.archivos-existentes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--color-bg);
  border-radius: 10px;
  border: 1.5px solid var(--color-border);
}

.archivos-existentes-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.archivo-existente {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.archivo-existente form {
  flex-shrink: 0;
}

/* Paginación del feed de avisos */
.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
  font-size: 14.5px;
}

.paginacion a {
  font-weight: 600;
  color: var(--color-primary);
}

.paginacion a:hover {
  color: var(--color-accent);
}

.paginacion-actual {
  color: var(--color-text-muted);
}