/* ==========================================================================
   public_html/indice/listar/listar.css

   Objetivo: mínimo necesario y reutilizable.
   - app.css ya aporta: tokens, tipografías, contenedores, navbar (header),
     botones (boton_general), utilidades, modal, footer y responsive base.
   - Este archivo solo define lo específico del módulo Índice (tabla, forms,
     layout interno, pequeños helpers).
   ========================================================================== */

/* ==========================================================================
   1) Layout general (con HERO arriba)
   - Ya NO compensamos “navbar fija” con 10rem: el hero empuja el contenido.
   ========================================================================== */
.indice-main{
  padding-top: 3.2rem;        /* separación real entre hero y card */
  padding-bottom: 6rem;
  background: var(--primarioClaro);
  min-height: 60vh;
}

/* ==========================================================================
   2) Card del módulo (montada levemente sobre el hero)
   ========================================================================== */
.indice-card{
  background: var(--blanco);
  border: .1rem solid var(--grisMedio);
  border-radius: 1rem;
  padding: 2.2rem;

  /* “Premium”: apoya sobre el hero */
  margin-top: -7rem;
  box-shadow: 0 1.2rem 3rem rgba(0,0,0,.10);
}

@media (max-width: 720px){
  .indice-card{
    margin-top: -3.5rem;
    border-radius: .8rem;
  }
}

/* Header interno (título + acciones) */
.indice-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;        /* mejor alineación con botones */
  gap: 1.6rem;
  flex-wrap:wrap;
  margin-bottom: 1.2rem;
}

/* ==========================================================================
   3) Helpers del módulo (mantenerlos mínimos)
   ========================================================================== */
.row{
  display:flex;
  align-items:center;
  gap: 1rem;
  flex-wrap:wrap;
}
.spacer{ flex:1; }

/* Texto secundario (en header, modales) */
.muted{ opacity:.85; }

/* ==========================================================================
   4) Estado (badge + status)
   ========================================================================== */
.indice-subheader{ margin: 1rem 0 1.2rem; }

.badge{
  display:inline-block;
  border: .1rem solid var(--grisMedio);
  border-radius: 999px;
  padding: .4rem .9rem;
  font-size: 1.25rem;
  color: var(--grisOscuro);
  background: var(--primarioClaro);
}

/* ==========================================================================
   5) Tabla (componente local)
   ========================================================================== */
.table-wrap{
  overflow:auto;
  border: .1rem solid var(--grisMedio);
  border-radius: .8rem;
  background: var(--blanco);
}

table{
  width:100%;
  border-collapse:collapse;
  min-width: 78rem;
}

th, td{
  padding: 1.1rem 1.2rem;
  border-bottom: .1rem solid var(--grisMedio);
  text-align:left;
  font-size: 1.45rem;
  color: var(--grisOscuro);
}

th{
  color: var(--secundario);
  font-weight: 600;
  background: var(--primarioClaro);
  white-space:nowrap;
}

tr:hover td{ background: rgba(192,156,107,.08); }

@media (max-width: 480px){
  table{ min-width: 64rem; }
}

/* ==========================================================================
   6) Forms (inputs/select/textarea locales)
   ========================================================================== */
.field{ display:flex; flex-direction:column; gap:.6rem; }
.label{ font-size: 1.35rem; color: var(--grisOscuro); opacity:.9; }

.input, .select, .textarea{
  width:100%;
  border: .1rem solid var(--grisMedio);
  border-radius: .5rem;
  padding: 1rem 1.2rem;
  background: var(--blanco);
  color: var(--grisOscuro);
  font-size: 1.5rem;
}

.input::placeholder,
.textarea::placeholder{
  color: rgba(74,74,74,.55);
}

.small{ font-size: 1.25rem; color: var(--grisOscuro); opacity:.85; }
.hint{ margin-left:.2rem; margin-top:.4rem; }

/* ==========================================================================
   7) Dropdown / Autocomplete (local)
   ========================================================================== */
.dd{ position:relative; }

.dd-list{
  position:absolute;
  top: calc(100% + .6rem);
  left:0;
  right:0;
  background: var(--blanco);
  border: .1rem solid var(--grisMedio);
  border-radius: .5rem;
  max-height: 24rem;
  overflow:auto;
  z-index: 950; /* por encima del contenido */
}

/* ==========================================================================
   8) Layout de formularios en modales (grid)
   ========================================================================== */
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem 1.6rem;
  margin-top: 1rem;
}

.form-grid-1{ grid-template-columns: 1fr; }
.form-grid-2{ grid-template-columns: 1fr 1fr; }
.form-grid-3{ grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 900px){
  .form-grid-3{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .form-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   9) Panel interno del crearModal (local)
   ========================================================================== */
.panel{
  border: .1rem solid var(--grisMedio);
  border-radius: .8rem;
  padding: 1.2rem;
  background: var(--blanco);
  margin-top: 1.2rem;
}

.panel-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 1.2rem;
  flex-wrap:wrap;
  margin-bottom: 1rem;
}

.panel-title{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  min-width:24rem;
}

.panel-note{ margin-top:.8rem; opacity:.85; }

.sep{
  border:none;
  border-top: .1rem solid var(--grisMedio);
  margin: 1.4rem 0;
}

/* ==========================================================================
   10) Checkboxes (local)
   ========================================================================== */
.check-group{ display:grid; gap:.8rem; margin-top: 1.2rem; }

.check-line{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  font-size: 1.45rem;
  color: var(--grisOscuro);
}

.check-line input[type="checkbox"]{
  width: 1.6rem;
  height: 1.6rem;
}

/* ==========================================================================
   11) Ajustes puntuales
   ========================================================================== */
@media (max-width: 480px){
  .indice-card{ border-radius: 0; }
}

/* Toggle visual Persona/Empresa (solo por aria-pressed) */
.boton_general[aria-pressed="true"]{
  background-color: transparent;
  color: var(--primario);
  border: .15rem solid var(--primario);
}