/* planta.css — estilos de la herramienta planta (42.6). Cada tarea escribe solo en su archivo.
   Todo cuelga de clases `pl-` o de los ids `planta-`; los colores salen de las variables de app.css
   (así el modo oscuro funciona sin reglas propias). */

#planta-raiz { max-width: 1100px; }

#planta-raiz .card-header { flex-wrap: wrap; }
.pl-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Barra de estado y buscador */
.pl-filtros { justify-content: space-between; box-shadow: none; padding: 0; border: 0; background: transparent; margin-bottom: 12px; }
.pl-estados { margin: 0; }
/* N-EQ-04: Activos y De baja miden como el campo Buscar de su fila: 38 px (41 en tableta, 42 en el celular), igual que los botones de
   las demás barras de filtros (BTN-06). */
.pl-filtros .section-tab { min-height: 38px; }
@media (min-width: 601px) and (max-width: 1120px) { .pl-filtros .section-tab { min-height: 41px; } }
@media (max-width: 600px) { .pl-filtros .section-tab { min-height: 42px; } }
.pl-filtros input[type="search"] { flex: 1 1 200px; max-width: 320px; min-width: 140px; }

/* Lista */
.pl-tabla td { vertical-align: middle; }
.pl-tabla td.pl-nombre { font-weight: 700; white-space: normal; min-width: 180px; }
.pl-tabla td.pl-acciones-celda { text-align: right; }
.pl-vacio { text-align: center; color: var(--muted); padding: 36px 12px; }
.pl-tabla tbody tr.pl-fila-baja td { color: var(--muted); }

/* Ventanas */
.pl-modal { max-width: 640px; }
.pl-modal-corto { max-width: 440px; }
.pl-modal-ancho { max-width: 900px; }
.pl-pestanas { margin-top: 0; }
.pl-pestanas .section-tab[hidden] { display: none; }

.pl-form { gap: 12px; }
.pl-form .pl-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pl-form .pl-fila > label { min-width: 0; }
.pl-form input, .pl-form select, .pl-form textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.pl-form textarea {
  font: inherit; font-size: 15px; padding: 11px 14px; resize: vertical;
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.pl-form textarea:focus, .pl-form select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(13, 79, 90, 0.08); }
.pl-form [aria-invalid="true"] { border-color: var(--err); }
.pl-form .btn { margin-top: 0; padding: 9px 16px; font-size: 13px; }
.pl-form .btn.small { padding: 5px 11px; font-size: 11.5px; }
.pl-form .modal-actions { align-items: center; }
/* Ventanas con desplazamiento (celular, pantallas bajas): el aviso se queda arriba a la vista y los botones abajo, siempre a mano. El
   relleno de abajo se anula con el margen para que la ventana mida lo mismo cuando no hay nada que desplazar.
   N5-06: Chrome mide el `bottom` de un sticky desde el interior del relleno de la ventana (28 px; 16 px más el borde seguro en el celular, app.css), así que
   bajo los botones quedaba una franja de ese alto donde asomaba el borde del campo siguiente. `--pl-abajo` es ese relleno y la franja se tapa con una sombra
   sin difuminar del color de la tarjeta, bajada ese mismo alto: no mueve nada (el pie, los botones y el alto de la ventana quedan igual), no suma área
   desplazable (una sombra no cuenta como contenido) y, si otro navegador mide el borde de abajo de otra forma, queda fuera de la ventana y no se ve.
   Medido en Chromium: la franja pasa de 16 px (375×667) y 28 px (1280×500) a 0. */
.pl-modal { --pl-abajo: 28px; }
.pl-modal > .alert { position: sticky; top: 8px; z-index: 2; box-shadow: var(--shadow-sm); }
.pl-modal .modal-actions { position: sticky; bottom: 0; z-index: 2; background: var(--card); padding-bottom: 14px; margin-bottom: -14px; box-shadow: 0 var(--pl-abajo) 0 0 var(--card); }
@media (max-width: 600px) { .pl-modal { --pl-abajo: calc(16px + env(safe-area-inset-bottom)); } }
.pl-espacio { flex: 1 1 auto; }
.pl-baja { margin: 0; font-size: 13px; color: var(--muted); }

/* Beneficiarios */
.pl-beneficiarios { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px 12px; margin: 0; min-width: 0; }
.pl-beneficiarios legend { font-size: 13px; font-weight: 600; padding: 0 6px; color: var(--ink); }
.pl-benef { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 0.9fr) auto; gap: 8px; align-items: end; margin-bottom: 8px; }
.pl-benef label { font-size: 12px; }
.pl-benef-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pl-total { font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-total.pl-excede { color: var(--err); }

/* Importar */
.pl-import-archivo { margin-bottom: 12px; }
.pl-import-resumen { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.pl-import-tabla { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.pl-import-tabla table { font-size: 12.5px; }
.pl-import-tabla td, .pl-import-tabla th { padding: 6px 10px; }
.pl-import-tabla td.pl-motivo { white-space: normal; color: var(--muted); }
.pl-import-resultado { font-size: 13px; }
.pl-import-resultado li { margin: 4px 0; }

@media (max-width: 640px) {
  .pl-form .pl-fila { grid-template-columns: 1fr; }
  .pl-benef { grid-template-columns: 1fr 1fr; }
  .pl-filtros input[type="search"] { max-width: none; }
  /* La tabla no cabe en el ancho del celular: cargo, área y lugar se esconden (están en la ficha) y la fila entera se toca para abrir. */
  .pl-tabla th:nth-child(n+2):nth-child(-n+4), .pl-tabla td:nth-child(n+2):nth-child(-n+4) { display: none; }
  .pl-tabla td.pl-nombre { min-width: 0; white-space: normal; }
  .pl-tabla tbody tr[data-id] { cursor: pointer; }
}