/* componentes.css — piezas compartidas por publico, panel y puerta. */

/* Botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1.05rem 2rem;border-radius:2px;text-decoration:none;
  font-weight:700;font-size:.9rem;letter-spacing:.09em;text-transform:uppercase;
  border:2px solid transparent;cursor:pointer;transition:.18s;
  font-family:var(--dz);min-height:52px; /* objetivo tactil holgado */
}
.btn-1{background:var(--turquesa);color:#08201F}
.btn-1:hover{background:#20C9C3;transform:translateY(-2px)}
.btn-2{border-color:var(--borde);color:var(--tinta);background:transparent}
.btn-2:hover{border-color:var(--turquesa);color:var(--turquesa-texto)}
.btn:focus-visible{outline:3px solid var(--cobre);outline-offset:3px}

/* Kicker: la etiqueta chica sobre los titulos */
.kicker{display:inline-flex;align-items:center;gap:.6rem;font-size:.72rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--turquesa-texto);margin:0 0 1.4rem}
.kicker::before{content:'';width:34px;height:2px;background:var(--cobre)}

/* Boton de tema claro/oscuro */
.tema{background:none;border:1px solid var(--borde);color:var(--tinta-suave);width:44px;height:44px;border-radius:2px;cursor:pointer;font-size:1rem;transition:.2s}
.tema:hover{border-color:var(--turquesa);color:var(--turquesa-texto)}

/* Tarjeta: superficie elevada */
.tarjeta{background:var(--superficie);border:1px solid var(--borde);border-radius:4px;padding:1.3rem}

/* Alertas de estado */
.alerta{padding:1rem 1.2rem;border:1px solid var(--borde);border-left:4px solid var(--acero);background:var(--fondo-alt);font-size:.95rem}
.alerta--exito{border-left-color:var(--exito);color:var(--exito-texto)}
.alerta--advertencia{border-left-color:var(--advertencia);color:var(--advertencia-texto)}
.alerta--error{border-left-color:var(--error);color:var(--error-texto)}

/* Formularios */
.campo{margin-bottom:1.6rem}
.campo label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:.55rem}
.campo label .opc{font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--acero)}
.campo input[type=text],.campo input[type=email],.campo input[type=tel],.campo input[type=search]{
  width:100%;background:var(--fondo-alt);color:var(--tinta);
  border:1px solid var(--borde);border-radius:2px;
  /* Objetivo tactil holgado y texto de 1.05rem: se completa desde el celular. */
  padding:1rem 1.1rem;min-height:56px;font-size:1.05rem;font-family:var(--dz);
  transition:.18s;
}
.campo input:focus{outline:none;border-color:var(--turquesa);box-shadow:0 0 0 3px color-mix(in srgb,var(--turquesa) 24%,transparent)}
.campo input[aria-invalid=true]{border-color:var(--error)}
.ayuda{font-size:.85rem;color:var(--acero);margin:.45rem 0 0}
.campo .error{color:var(--error-texto);font-size:.9rem;margin:.45rem 0 0;font-weight:600}
.errores{
  border:1px solid color-mix(in srgb,var(--error) 55%,transparent);
  background:color-mix(in srgb,var(--error) 12%,transparent);
  padding:1.2rem 1.4rem;margin:0 0 2rem;
}
.errores b{display:block;margin-bottom:.4rem;color:var(--error-texto)}
.errores ul{margin:0;padding-left:1.2rem}

/* Paginacion */
.paginacion{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;font-size:.85rem}
.paginacion a{text-decoration:none}
.paginacion-pagina,.paginacion-flecha{display:inline-block;padding:.4rem .7rem;border:1px solid var(--borde);border-radius:3px;color:var(--tinta-suave);transition:.15s}
.paginacion a:hover{border-color:var(--turquesa);color:var(--tinta)}
.paginacion-pagina--actual{background:var(--turquesa);border-color:var(--turquesa);color:#08201F;font-weight:700}
.paginacion-flecha--inactiva{opacity:.4}
.paginacion-puntos{padding:.4rem .3rem;color:var(--acero)}

/* Tablas y filtros */
.filtros{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.filtros input[type=search],.filtros input[type=text]{padding:.58rem .7rem;border:1px solid var(--borde);border-radius:3px;font-family:inherit;font-size:.87rem;background:var(--superficie);color:var(--tinta)}
.campo-ancho{flex:1;min-width:250px}
.tabla{width:100%;border-collapse:collapse;font-size:.88rem}
.tabla th{text-align:left;padding:.7rem 1rem;font-size:.67rem;letter-spacing:.13em;text-transform:uppercase;color:var(--acero);border-bottom:1px solid var(--borde);white-space:nowrap}
.tabla td{padding:.72rem 1rem;border-bottom:1px solid var(--borde)}
.tabla tbody tr:last-child td{border-bottom:none}
.tabla tbody tr:hover{background:var(--fondo-alt)}
.tabla code{font-family:ui-monospace,monospace;font-size:.82rem}
.pie-tabla{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-top:1rem;font-size:.82rem;color:var(--tinta-suave)}
.pie-tabla nav{margin-left:auto}