/* === WPM Sidebar (consolidado y limpio) ===================== */
:root{
  /* CAMBIAS SOLO ESTAS DOS para probar el FONDO del sidebar */
  --wpm-bg-top:    #5E7690;  /* arriba */
  --wpm-bg-bottom: #3E5668;  /* abajo */

  /* Colores de los botones (opacos, así no dependen del fondo) */
  --btn-n: #4f6374;  /* normal */
  --btn-h: #586f81;  /* hover  */
  --btn-a: #627e90;  /* activo */
}

.wpm-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:100vh;
}
.wpm-layout.wpm-collapsed{ grid-template-columns:76px 1fr; }

/* Sidebar */
.wpm-sidebar{
  position:sticky; top:0; height:100vh;
  background:linear-gradient(180deg, var(--wpm-bg-top), var(--wpm-bg-bottom));
  color:#eef3f7;
  padding:12px 10px 76px;     /* espacio para la hamburguesa abajo */
  box-shadow:2px 0 12px rgba(0,0,0,.15);
  display:flex; flex-direction:column; gap:8px;
}

.wpm-side-top{ display:flex; align-items:center; gap:10px }
.wpm-brand{ display:flex; align-items:center; gap:8px; font-weight:700 }
.wpm-brand-text{ color:#fff }
.wpm-dot{ width:8px; height:8px; border-radius:999px; background:#22c55e }

/* Secciones e items */
.wpm-section{
  color:#b7c3cb;
  font-size:.75rem; font-weight:700; letter-spacing:.08em;
  padding:10px 12px 6px;
}
.wpm-nav{ display:flex; flex-direction:column; gap:10px }

/* Botón (funciona con .wpm-item o con <a> directo) */
.wpm-item,
.wpm-sidebar .wpm-nav > a{
  display:grid; grid-template-columns:28px 1fr; align-items:center; gap:10px;
  margin:0 6px; padding:10px 12px; border-radius:14px;
  color:#fff; text-decoration:none;
  background:var(--btn-n);
  border:1px solid rgba(255,255,255,.35);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 2px 6px rgba(0,0,0,.12);
  transition:transform .05s ease, background .2s ease, box-shadow .2s ease;
}
.wpm-item:hover,
.wpm-sidebar .wpm-nav > a:hover{ background:var(--btn-h); }
.wpm-item.active,
.wpm-sidebar .wpm-nav > a.active{
  background:var(--btn-a);
  box-shadow: inset 0 0 0 2px #fff, 0 6px 12px rgba(0,0,0,.22);
}

.wpm-ico{ display:grid; place-items:center }
.wpm-ico svg{ width:20px; height:20px; fill:#fff; display:block }
.wpm-label{ white-space:nowrap }

/* Colapsado: solo iconos */
.wpm-layout.wpm-collapsed .wpm-brand-text,
.wpm-layout.wpm-collapsed .wpm-section,
.wpm-layout.wpm-collapsed .wpm-label{ display:none }
.wpm-layout.wpm-collapsed .wpm-item,
.wpm-layout.wpm-collapsed .wpm-sidebar .wpm-nav > a{
  grid-template-columns:1fr; justify-items:center; padding:12px;
}

/* Hamburguesa abajo-izquierda */
.wpm-toggle{
  position:absolute; left:12px; bottom:12px;
  width:44px; height:44px; border-radius:12px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.10);
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.15);
}
.wpm-toggle:hover{ background:rgba(255,255,255,.18) }
.wpm-toggle svg{ fill:#fff; opacity:.95 }

/* Contenido */
.wpm-content{ padding:18px }
.wpm-main{ background:#fff; border-radius:14px; padding:18px; box-shadow:0 4px 16px rgba(0,0,0,.06) }

/* === Responsive móvil (<= 1024px) ================== */
@media (max-width: 1024px){
  .wpm-layout{ grid-template-columns: 1fr; }
  .wpm-content{ padding: 12px; }

  /* Sidebar como panel deslizante */
  .wpm-sidebar{
    position: fixed; left: 0; top: 0; bottom: 0;
    width: 280px; max-width: 85vw; height: 100vh;
    transform: translateX(-105%); transition: transform .25s ease;
    z-index: 1001;
    box-shadow: 8px 0 20px rgba(0,0,0,.25);
  }
  body.wpm-mobile-open .wpm-sidebar{ transform: translateX(0); }

  /* Ocultar el toggle de escritorio dentro del sidebar */
  .wpm-toggle{ display: none; }

  /* Botón flotante para abrir menú en móvil */
  .wpm-fab{
    position: fixed; left: 12px; bottom: 12px;
    width: 48px; height: 48px; border-radius: 14px;
    border: 1px solid rgba(0,0,0,.1);
    background: var(--btn-n); color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    z-index: 1000;
  }
  .wpm-fab svg{ width: 22px; height: 22px; fill: #fff; }

  /* Backdrop cuando el menú está abierto */
  .wpm-backdrop{
    position: fixed; inset: 0; background: rgba(0,0,0,.35);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
    z-index: 1000;
  }
  body.wpm-mobile-open .wpm-backdrop{ opacity: 1; pointer-events: auto; }

  /* Evitar scroll de fondo al abrir menú */
  body.wpm-mobile-open{ overflow: hidden; }
}

/* FAB oculto por defecto; solo se muestra en móvil (en el @media) */
.wpm-fab{ display: none; }

/* Mostrar SIEMPRE el toggle interno en escritorio */
@media (min-width: 1025px){
  .wpm-toggle{ display:grid !important; }   /* el botón dentro del sidebar */
  .wpm-fab{ display:none !important; }      /* el FAB solo en móvil */
}

/* En móvil: FAB visible, toggle interno oculto */
@media (max-width: 1024px){
  .wpm-fab{ display:grid !important; }
  .wpm-toggle{ display:none !important; }
}

/* Botón solo en móvil */
.wpm-toggle { display: none; }
@media (max-width: 991px){
  .wpm-toggle{
    display: block;
    width: calc(100% - 32px);
    margin: 12px 16px 16px 16px; /* justo bajo Cerrar sesión */
    padding: 10px 12px;
    border: 1px solid #d9dee3;
    border-radius: 10px;
    background: #fff;
    font-weight: 600;
    cursor: pointer;
  }
}

/* Comportamiento del sidebar en móvil: oculto por defecto */
@media (max-width: 991px){
  .wpm-sidebar{
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  body.sidebar-open .wpm-sidebar{
    transform: translateX(0);
  }
}



/* ===========================
   Ajustes globales SOLO para celular
   =========================== */
@media (max-width: 576px) {
  /* Contenedores principales: que nunca se salgan */
  .wpm-content,
  .wpm-main {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 12px;
    padding-right: 12px;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* Todos los elementos dentro se ajustan al ancho */
  .wpm-main * {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Imágenes y tablas: responsivas sin romper layout */
  img, video {
    max-width: 100%;
    height: auto;
  }

  table {
    display: block;
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== Ajuste global SOLO celular ===== */
@media (max-width: 576px){
  html, body{
    max-width:100%;
    overflow-x:hidden;
  }

  /* Contenedores del contenido */
  .wpm-content,
  .wpm-main{
    width:100% !important;
    max-width:100% !important;
    margin:0;
    padding-left:12px;
    padding-right:12px;
    box-sizing:border-box;
    overflow-x:hidden;
    border-radius:12px; /* un pelo menos para móvil */
  }

  /* Tipografías fluidas: títulos y párrafos no “revientan” */
  .wpm-main h1{ font-size: clamp(20px, 6vw, 28px); line-height:1.25; }
  .wpm-main p { font-size: clamp(14px, 4vw, 16px); line-height:1.45; }

  /* Cualquier hijo no puede exceder el ancho */
  .wpm-main > *{ max-width:100%; box-sizing:border-box; }

  /* Tablas/inputs que suelen desbordar */
  table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  img, video{ max-width:100%; height:auto; }
}

/* ===== FIX DEFINITIVO SOLO CELULAR (≤576px) ===== */
@media (max-width: 576px) {
  html, body {
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* El grid contenedor nunca debe exceder el viewport */
  .wpm-layout {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Contenedor de página y tarjeta blanca */
  .wpm-content,
  .wpm-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* CLAVE: en grid/flex el min-width:auto causa desborde.
     Lo forzamos a 0 para que todo pueda encoger en celular. */
  .wpm-main,
  .wpm-main * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Elementos típicos que rompen el ancho */
  img, video { max-width: 100% !important; height: auto; }
  table { display: block; width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  input, select, textarea, .btn { max-width: 100% !important; }
}

/* Espaciado del buscador en móvil: margen controlado */
@media (max-width: 576px){
  #chk-search{ margin-top: 12px !important; }
}


/* ===== Checklist — Fix radios RUT/Nombre SOLO en celular ===== */
@media (max-width: 576px){
  /* El formulario puede envolver en varias líneas sin romper el ancho */
  #chk-search{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  /* Grupo de radios en una sola línea por etiqueta */
  #chk-search .radio-group{
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: center;
    min-width: 0;              /* CLAVE para que pueda encoger */
  }

  /* Cada opción (RUT / Nombre) no se corta y mantiene su forma */
  #chk-search .radio-group label{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    flex: 0 0 auto;
    min-width: 0;
  }
  #chk-search .radio-group label span{
    white-space: nowrap;       /* evita "RU / T" y "Nombr / e" */
  }

  /* Si hay input de búsqueda al lado, que ocupe el ancho disponible */
  #chk-search input[type="text"],
  #chk-search input[type="search"],
  #chk-search .search-input{
    flex: 1 1 240px;
    min-width: 0;
    max-width: 100%;
  }

  /* Botones dentro del form: ancho natural */
  #chk-search .btn,
  #chk-search button{
    flex: 0 0 auto;
    max-width: 100%;
  }
}

/* ===== Ajuste de espacio del texto en escritorio ===== */
@media (min-width: 992px){
  .page-checklist .chk-head{
    margin-bottom: 10px;   /* reduce espacio bajo el mensaje */
  }

  #chk-search{
    margin-top: 20px !important; /* caja un poco más abajo para separar del texto */
  }
}

/* ===== Solo bajar visualmente la caja en escritorio, sin “aplastarla” ===== */
@media (min-width: 992px){
  #chk-search{
    position: relative;
    transform: translateY(16px);   /* baja la caja sin afectar el layout */
  }

  /* Por si el contenedor es flex y la centraba verticalmente */
  #chk-search{ align-self: flex-start; }
}

/* Ajuste de posición del botón + Nueva comunidad SOLO en escritorio */
@media (min-width: 992px){
  #btn-new-community{
    position: relative;
    top: -40px;   /* súbelo, ajusta -10px o -14px según lo necesites */
  }
}

/* === Estilos para Tablas ===================== */
.wpm-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: 0.9rem;
}

.wpm-table th,
.wpm-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb; /* Línea gris clara de separación */
}

.wpm-table thead th {
  font-weight: 600;
  color: #6b7280; /* Texto de cabecera más sutil */
}

.wpm-table tbody tr:hover {
  background-color: #f9fafb; /* Sombreado suave al pasar el mouse */
}

.wpm-table .btn {
  padding: 6px 12px;
  font-size: 0.875rem;
  text-decoration: none;
  border: 1px solid #d1d5db;
  background-color: #fff;
  border-radius: 8px;
  cursor: pointer;
}
.wpm-table .btn:hover {
  background-color: #f9fafb;
}

/* === Estilos para Botón Principal de Acción === */
.btn-checklist {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid rgba(163,179,191,.35);
  background: #fff;
  color: #0a2540;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(163,179,191,.28) inset;
  transition: all .15s ease;
}

.btn-checklist:hover {
  background: #eaf2ff;
  border-color: #9bb4ff;
}

.btn-primary {
  background: #5E7486;
  color: #fff;
  border-color: rgba(255,255,255,.28);
}

.btn-primary:hover {
  background: #506877;
  border-color: #cfe0ff;
}

/* Fix para botones primarios dentro de tablas */
.wpm-table .btn-primary {
  background-color: #5E7486;
  color: #fff;
  border-color: rgba(255,255,255,.28);
}

.wpm-table .btn-primary:hover {
  background-color: #506877;
}

/* Fix para botones primarios dentro de tablas */
.wpm-table .btn-primary {
  background-color: #5E7486;
  color: #fff;
  border-color: rgba(255,255,255,.28);
}

.wpm-table .btn-primary:hover {
  background-color: #506877;
}

/* === Fix para Tablas en Celular (Versión 2) ===================== */

@media (max-width: 767px) {
  .wpm-table-responsive-container {
    width: 100%;
    overflow-x: auto; /* Permite el scroll horizontal */
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
  }

  .wpm-table {
    min-width: 600px; /* IMPORTANTE: Fuerza un ancho mínimo para la tabla */
    width: 100%;
    margin-top: 0;
    border: none;
  }

  .wpm-table th,
  .wpm-table td {
    white-space: nowrap; /* Evita que el texto se parta en varias líneas */
  }
}

/* === Fix para Diseño en Celular (Listado de Comunidades) ===================== */

/* === Fix para Diseño en Celular (SOLO Listado de Comunidades) ===================== */
@media (max-width: 767px) {
  /* Esta regla ahora solo aplica en la página de comunidades */
  body.route-comunidades .page-header {
    flex-direction: column; 
    align-items: flex-start;
    gap: 1rem;
  }

  /* Esta regla ahora solo aplica en la página de comunidades */
  body.route-comunidades .wpm-main .btn-checklist {
    white-space: nowrap; 
  }
}

/* === Estilos para Formularios Detallados === */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* Espacio entre la etiqueta y el campo */
}

.form-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: #6b7280;
}

.form-control {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  box-sizing: border-box;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control:focus {
  border-color: #5E7690;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(94, 118, 144, 0.25);
}

textarea.form-control {
  min-height: 100px;
  resize: vertical;
}


/* === Sistema de Grilla para Formularios ===================== */
.detail-grid {
  display: grid;
  /* Divide el espacio en 6 columnas iguales */
  grid-template-columns: repeat(6, 1fr); 
  gap: 1rem 1.5rem; /* Espacio vertical y horizontal */
}

/* Clases para controlar cuántas columnas ocupa un campo */
.grid-col-1 { grid-column: span 1; }
.grid-col-2 { grid-column: span 2; }
.grid-col-3 { grid-column: span 3; }
.grid-col-4 { grid-column: span 4; }
.grid-col-5 { grid-column: span 5; }
.grid-col-6 { grid-column: span 6; } /* Ocupa todo el ancho */



/* ==== FIX TOGGLE: usar solo el botón del sidebar, NO el flotante ==== */
.wpm-fab,
.wpm-backdrop {
  display: none !important;
}

/* Botón toggle DENTRO del sidebar (pegado bajo "Cerrar sesión") */
.wpm-sidebar .wpm-nav .wpm-toggle {
  position: static !important;
  inset: auto !important;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 8px 0 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(127, 140, 154, .25);
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

/* Sin texto en el toggle */
.wpm-sidebar .wpm-nav .wpm-toggle .wpm-label { 
  display: none !important; 
}

.wpm-sidebar .wpm-nav .wpm-toggle svg { 
  display: block; 
}

/* === Estilos para Encabezados de Página === */
.page-header {
  display: flex;
  justify-content: space-between; /* Alinea los elementos a cada extremo */
  align-items: center;        /* Centra verticalmente */
  flex-wrap: wrap;            /* Permite que se envuelva si no hay espacio */
  gap: 1rem;                  /* Espacio entre elementos si se envuelven */
}