/* =============================================================
   formularios_htmx_modulos.css
   Estilos reutilizables para módulos con formularios HTMX inline
   (direcciones, entradas/salidas, y futuros módulos similares)
   ============================================================= */

/* -------------------------------------------------------------
   CAMPOS DE FORMULARIO — label arriba, input abajo
   ------------------------------------------------------------- */
.campo-grupo {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.campo-grupo label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 2px;
    padding-left: 2px;
}

.campo-grupo label.opcional {
    color: #555;
}

.campo-grupo .form-control,
.campo-grupo .form-select {
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 0.92rem;
    padding: 6px 10px;
    background-color: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.campo-grupo .form-control:focus,
.campo-grupo .form-select:focus {
    border-color: #5c8664;
    box-shadow: 0 0 0 0.2rem rgba(92, 134, 100, 0.2);
    outline: none;
}

/* -------------------------------------------------------------
   TABLA — encabezados y columnas numéricas
   ------------------------------------------------------------- */
@media (max-width: 991px) {
    thead { display: none !important; }
}

thead th {
    background-color: #5c8664 !important;
    color: white !important;
    font-weight: 600;
}

/* Alinear columnas numéricas (entrada/salida) a la derecha */
th:nth-child(3),
th:nth-child(4) {
    text-align: right;
}

tbody td:nth-child(4),
tbody td:nth-child(5) {
    text-align: right !important;
}

/* -------------------------------------------------------------
   BOTONES DE ACCIÓN — hover con efecto de elevación
   ------------------------------------------------------------- */
.btn-link.text-success:hover {
    background-color: #d4edda !important;
    border-radius: 0.25rem;
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

.btn-link.text-warning:hover {
    background-color: #f8ead7 !important;
    border-radius: 0.25rem;
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

.btn-link.text-secondary:hover {
    background-color: #c5d2d3 !important;
    border-radius: 0.25rem;
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

/* -------------------------------------------------------------
   CAMPOS OPCIONALES Y REQUERIDOS
   ------------------------------------------------------------- */

/* Label opcional */
.lbl-opt {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #555 !important;
    margin-bottom: 4px;
}

/* Input/select opcional — banda verde clara */
.inp-opt { border-left: 5px solid #5c8664 !important; }

/* Label requerido */
.lbl-req {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #555 !important;
    margin-bottom: 4px;
}

/* Asterisco rojo solo dentro de label requerido */
.lbl-req .ast { color: #dc3545; font-weight: bold; }

/* Input/select requerido — banda rojo oscuro */
.inp-req { border-left: 5px solid #d4a017 !important; }



.card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.card-header-14 {
  background: linear-gradient(135deg, #5c8664 0%, #5c8664 45%, #d4a017 55%, #d4a017 100%);
  border-radius: 8px;
  border-left: 5px solid #2e4d38;
  box-shadow: 0 3px 18px rgba(46, 77, 56, 0.25);
  text-align: center;
  padding: 10px 16px;
}

.card-header-14 h2,
.card-header-14 h3,
.card-header-14 h4 {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.card-body {
  border-radius: 0 0 8px 8px;
  background: #fff;
  padding: 16px;
}