/* ============================================
   MÓDULO: Alquiler
   Archivo: css/modules/alquiler.css

   Estilos del módulo de gestión de alquiler:
   tabs de navegación, formularios de pago,
   contratos, depósitos, recibos y comisiones.
   Responsive en: css/responsive/alquiler/
   ============================================ */

/* --------------------------------------------
   HEADER DEL MÓDULO — LAYOUT
   -------------------------------------------- */

/* Fila izquierda: botón atrás + tabs */
.alq-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Botón volver al dashboard */
.alq-btn-back {
    padding: 6px 10px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    color: #374151;
    font-size: 12px;
}

.alq-btn-back:hover {
    background: #e5e7eb;
}

/* Fila derecha: buscador + botones acción */
.alq-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --------------------------------------------
   TABS DE NAVEGACIÓN
   -------------------------------------------- */

/* Contenedor del grupo de tabs */
.alq-tab-group {
    display: flex;
    align-items: center;
    gap: 0;
}

/* Base de todos los tabs */
.alq-tab {
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    cursor: pointer;
}

/* Tab activo */
.alq-tab--active {
    background: #0a2463;
    color: white;
}

/* Tab inactivo */
.alq-tab--inactive {
    background: #e5e7eb;
    color: #6b7280;
}

.alq-tab--inactive:hover {
    background: #d1d5db;
}

/* Primer tab (borde izquierdo redondeado) */
.alq-tab--first {
    border-radius: 4px 0 0 4px;
}

/* Último tab (borde derecho redondeado) */
.alq-tab--last {
    border-radius: 0 4px 4px 0;
}

/* Tabs intermedios (sin border-radius) */
.alq-tab--mid {
    border-radius: 0;
}

/* --------------------------------------------
   BUSCADOR
   -------------------------------------------- */

/* Contenedor relativo */
.alq-search-wrap {
    position: relative;
}

/* Input de búsqueda */
.alq-search-input {
    padding: 4px 28px 4px 8px;
    font-size: 11px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    width: 180px;
    outline: none;
    color: #374151;
}

/* Botón limpiar */
.alq-search-clear {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    font-size: 13px;
    padding: 2px 4px;
}

/* --------------------------------------------
   BOTÓN DE ACCIÓN DEL HEADER
   -------------------------------------------- */

/* Nuevo Contrato / Registrar Pago */
.alq-btn-header {
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: #0a2463;
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.alq-btn-header:hover {
    background: #1a3a8a;
}

/* --------------------------------------------
   VISTAS Y CARDS
   -------------------------------------------- */

/* Card compacta (sin padding interno) */
.alq-view-card {
    padding: 0;
    overflow: hidden;
}

/* Header compacto dentro de card */
.alq-card-header {
    padding: 4px 8px;
    margin-bottom: 0;
    border-bottom: none;
}

/* Título de card */
.alq-card-title {
    font-size: 16px;
    font-weight: 700;
}

/* Íconos de título — variantes de color */
.alq-icon--purple { color: #8b5cf6; }
.alq-icon--amber  { color: #f59e0b; }
.alq-icon--red    { color: #ef4444; }
.alq-icon--indigo { color: #6366f1; }
.alq-icon--green  { color: #10b981; }
.alq-icon--blue   { color: #2563eb; }

/* Tabla sin margen/radio extra */
.alq-table-flush {
    margin: 0;
    border-radius: 0;
}

/* Wrapper de tabla sin margen */
.alq-table-wrap {
    margin: 0;
}

/* --------------------------------------------
   CELDAS DE TABLA
   -------------------------------------------- */

/* Encabezado de columna compacto */
.alq-th {
    font-size: 10px;
    font-weight: 700;
}

/* Celda de loading/vacío */
.alq-td-loading {
    text-align: center;
    padding: 12px;
}

/* Celda de número de recibo */
.alq-td-recibo {
    font-weight: 700;
    color: #e11d48;
    font-size: 12px;
}

/* Fila anulada */
.alq-tr--anulado {
    opacity: 0.6;
}

/* Fila clickeable */
.alq-tr--clickable {
    cursor: pointer;
}

/* --------------------------------------------
   BADGES DE TIPO / ESTADO
   -------------------------------------------- */

/* Badge base */
.alq-badge {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
}

/* Cobro Inicial (azul) */
.alq-badge--cobro {
    background: #dbeafe;
    color: #1e40af;
}

/* Renta Mensual (verde) */
.alq-badge--renta {
    background: #dcfce7;
    color: #166534;
}

/* Anulado (rojo) */
.alq-badge--anulado {
    background: #fee2e2;
    color: #dc2626;
}

/* Neutral (gris) */
.alq-badge--neutral {
    background: #e5e7eb;
    color: #6b7280;
}

/* Badge de depósito (color dinámico vía inline) */
.alq-badge--deposito {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: white;
}

/* --------------------------------------------
   VISTA DISEÑO DE RECIBOS
   -------------------------------------------- */

/* Contenedor blanco del panel */
.alq-diseno-panel {
    background: white;
    padding: 18px;
    border: 1px solid #d1d5db;
}

/* Cabecera del panel */
.alq-diseno-header {
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 10px;
    margin-bottom: 16px;
}

/* Título del panel */
.alq-diseno-title {
    margin: 0;
    color: #0a2463;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Subtítulo descriptivo */
.alq-diseno-subtitle {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 13px;
}

/* Layout config + preview */
.alq-diseno-body {
    display: flex;
    gap: 18px;
}

/* Panel izquierdo (configuración) */
.alq-diseno-config {
    flex: 1;
}

/* Panel derecho (preview) */
.alq-diseno-preview {
    flex: 1;
}

/* Título de sección */
.alq-section-title {
    color: #0a2463;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}

/* Sub-título de sección (h4) */
.alq-section-subtitle {
    color: #0a2463;
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Separador de sección */
.alq-section-divider {
    border-top: 2px solid #e5e7eb;
    padding-top: 12px;
    margin-top: 12px;
    margin-bottom: 12px;
}

/* Grid de controles de estilos (2 cols) */
.alq-style-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    font-size: 11px;
}

/* Fila de control de estilo */
.alq-style-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Etiqueta del control */
.alq-style-label {
    flex: 1;
    font-weight: 600;
    color: #374151;
}

/* Input de tamaño de fuente */
.alq-size-input {
    width: 46px;
    padding: 3px 4px;
    border: 1px solid #d1d5db;
    font-size: 11px;
    text-align: center;
    font-family: inherit;
}

/* Checkbox de negrita */
.alq-bold-label {
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    font-size: 10px;
    color: #6b7280;
}

/* Fila de dimensiones */
.alq-dims-row {
    display: flex;
    gap: 14px;
    font-size: 11px;
}

/* Item de dimensión */
.alq-dim-item {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

/* Etiqueta de dimensión */
.alq-dim-label {
    font-weight: 600;
    color: #374151;
}

/* Input de dimensión */
.alq-dim-input {
    width: 60px;
    padding: 3px 4px;
    border: 1px solid #d1d5db;
    font-size: 11px;
    text-align: center;
    font-family: inherit;
}

/* Nota de dimensión */
.alq-dim-note {
    color: #6b7280;
    font-size: 10px;
}

/* Fila de disposición (fondo gris) */
.alq-layout-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 11px;
    padding: 6px 8px;
    background: #f3f4f6;
    border-radius: 4px;
}

/* Etiqueta de disposición */
.alq-layout-label {
    font-weight: 700;
    color: #0a2463;
}

/* Select de disposición */
.alq-select-layout {
    padding: 3px 6px;
    border: 1px solid #d1d5db;
    font-size: 11px;
    font-family: inherit;
}

/* --------------------------------------------
   FORMULARIOS
   -------------------------------------------- */

/* Grupo de formulario */
.alq-form-group {
    margin-bottom: 12px;
}

/* Etiqueta de formulario (azul oscuro) */
.alq-form-label {
    font-weight: 600;
    color: #0a2463;
    font-size: 12px;
    display: block;
    margin-bottom: 8px;
}

/* Etiqueta compacta (gris) */
.alq-form-label--sm {
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    display: block;
    margin-bottom: 3px;
}

/* Input estándar */
.alq-form-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 12px;
    box-sizing: border-box;
    font-family: inherit;
}

/* Input de solo lectura */
.alq-form-input--readonly {
    background: #f9fafb;
    color: #6b7280;
}

/* Input con número de recibo (texto rojo) */
.alq-form-input--recibo {
    background: white;
    font-weight: 700;
    color: #e11d48;
}

/* Input pequeño en panel de diseño */
.alq-form-input--sm {
    border: 1px solid #d1d5db;
    padding: 6px 10px;
    width: 100%;
    font-size: 12px;
    font-family: inherit;
    box-sizing: border-box;
}

/* Select de filtro */
.alq-select-filter {
    padding: 3px 8px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    outline: none;
    font-family: inherit;
}

/* Texto de ayuda */
.alq-form-hint {
    color: #6b7280;
    font-size: 11px;
}

/* Grid de 2 columnas */
.alq-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

/* Grid de 3 columnas */
.alq-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

/* Grid de 2 columnas (gap 8px, sin margen) */
.alq-grid-2--gap8 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* --------------------------------------------
   LÍNEAS DE CONCEPTO (editor de pagos)
   -------------------------------------------- */

/* Fila de concepto */
.alq-concept-line {
    display: grid;
    grid-template-columns: 120px 1fr 80px 70px 50px 30px;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}

/* Input de concepto */
.alq-concept-input {
    padding: 4px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 11px;
    font-family: inherit;
}

/* Input de monto (alineado derecha) */
.alq-concept-input--right {
    padding: 4px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 11px;
    text-align: right;
    font-family: inherit;
}

/* Botón eliminar concepto */
.alq-btn-remove-concept {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    padding: 4px 6px;
}

.alq-btn-remove-concept:hover { background: #dc2626; }

/* Botón agregar concepto */
.alq-btn-add-concept {
    background: #10b981;
    color: white;
    border: none;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
}

.alq-btn-add-concept:hover { background: #059669; }

/* --------------------------------------------
   BOTONES DE ACCIÓN
   -------------------------------------------- */

/* Primario azul */
.alq-btn-primary {
    padding: 6px 16px;
    background: #0a2463;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.alq-btn-primary:hover { background: #1a3a8a; }

/* Guardar verde */
.alq-btn-save {
    padding: 6px 16px;
    background: #059669;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.alq-btn-save:hover { background: #047857; }

/* Cancelar gris */
.alq-btn-cancel {
    padding: 6px 16px;
    background: #e5e7eb;
    color: #374151;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.alq-btn-cancel:hover { background: #d1d5db; }

/* Peligro rojo */
.alq-btn-danger {
    padding: 6px 14px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.alq-btn-danger:hover { background: #dc2626; }

/* Peligro rojo pequeño (en tablas) */
.alq-btn-danger--sm {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    padding: 4px 6px;
}

.alq-btn-danger--sm:hover { background: #dc2626; }

/* Neutro (con borde) */
.alq-btn-neutral {
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    background: white;
    color: #374151;
}

.alq-btn-neutral:hover { background: #f9fafb; }

/* WhatsApp */
.alq-btn-whatsapp {
    background: #25d366;
    color: white;
    border: none;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 600;
    font-size: 11px;
}

.alq-btn-whatsapp:hover { background: #1da851; }

/* PDF */
.alq-btn-pdf {
    background: #ef4444;
    color: white;
    border: none;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 600;
    font-size: 11px;
}

.alq-btn-pdf:hover { background: #dc2626; }

/* Grupo de botones (derecha) */
.alq-btn-group {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* Grupo de botones (izquierda) */
.alq-btn-group--left {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* --------------------------------------------
   MODALES
   -------------------------------------------- */

/* Overlay con scroll (formularios de pago) */
.alq-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 30px;
    overflow-y: auto;
}

/* Overlay centrado (confirmaciones, depósitos) */
.alq-modal-overlay--centered {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Dialog mediano (680px — pagos) */
.alq-modal-dialog {
    background: white;
    border-radius: 8px;
    width: 680px;
    max-width: 95%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    max-height: 90vh;
    overflow-y: auto;
}

/* Dialog grande (700px — recibo) */
.alq-modal-dialog--lg {
    background: white;
    border-radius: 8px;
    width: 700px;
    max-width: 95%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    max-height: 92vh;
    overflow-y: auto;
}

/* Dialog pequeño (400px — confirmaciones) */
.alq-modal-dialog--sm {
    background: white;
    border-radius: 8px;
    padding: 20px;
    width: 400px;
    max-width: 90%;
}

/* Dialog intermedio (500px — depósito) */
.alq-modal-dialog--md {
    background: white;
    border-radius: 8px;
    width: 500px;
    max-width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Header del modal (barra azul) */
.alq-modal-header {
    background: #0a2463;
    color: white;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Header con esquinas superiores redondeadas */
.alq-modal-header--rounded {
    background: #0a2463;
    color: white;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0 0;
}

/* Título del modal */
.alq-modal-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

/* Cuerpo del modal */
.alq-modal-body {
    padding: 16px;
}

/* --------------------------------------------
   CAJAS DE INFORMACIÓN
   -------------------------------------------- */

/* Info azul */
.alq-info-box {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    padding: 10px;
}

/* Éxito verde */
.alq-success-box {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 15px;
}

/* Advertencia amarilla */
.alq-warning-box {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 10px;
}

/* Contenedor neutro gris */
.alq-neutral-box {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 12px;
}

/* --------------------------------------------
   TARJETAS DE ESTADÍSTICAS
   -------------------------------------------- */

/* Base */
.alq-stat-card {
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

/* Verde (ingresos) */
.alq-stat-card--green {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

/* Amarilla (comisión) */
.alq-stat-card--amber {
    background: #fef3c7;
    border: 1px solid #fde68a;
}

/* Azul (neto) */
.alq-stat-card--blue {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

/* Roja (deducción) */
.alq-stat-card--red {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

/* Valor principal */
.alq-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

/* Etiqueta */
.alq-stat-label {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}

/* --------------------------------------------
   MESES PAGADOS (estado de cuenta)
   -------------------------------------------- */

/* Grid de meses */
.alq-months-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Badge de mes (color dinámico vía inline) */
.alq-month-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

/* Selector de año */
.alq-year-select {
    padding: 3px 6px;
    font-size: 11px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
}

/* --------------------------------------------
   VISTA DE RECIBO (PREVIEW)
   -------------------------------------------- */

/* Contenedor outer del preview */
.alq-receipt-outer {
    border: 3px solid #000;
    padding: 0;
    background: #e8e4df;
    font-family: 'Courier New', monospace;
    transform-origin: top left;
    position: relative;
}

/* Recibo imprimible */
.alq-receipt {
    border: 3px solid #000;
    background: white;
    font-family: 'Courier New', monospace;
    padding: 20px;
}

/* Tabla del recibo */
.alq-receipt-table {
    width: 100%;
    border-collapse: collapse;
}

/* Celda del recibo */
.alq-receipt-td {
    border: 1px solid #000;
    padding: 5px 8px;
    font-size: 10px;
    text-align: left;
}

/* Celda centrada */
.alq-receipt-td--center {
    border: 1.5px solid #000;
    padding: 4px;
    text-align: center;
}

/* Thead oscuro */
.alq-receipt-thead {
    background: #0a2463;
    color: white;
}

/* Tfoot gris */
.alq-receipt-tfoot {
    background: #f3f4f6;
    font-weight: bold;
}

/* --------------------------------------------
   LAYOUT UTILITARIO
   -------------------------------------------- */

/* Flex básico */
.alq-flex {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Flex con espacio entre elementos */
.alq-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Flex con wrap */
.alq-flex-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Separador fino */
.alq-separator {
    border-top: 1px solid #e5e7eb;
    margin: 12px 0;
}

/* Separador grueso */
.alq-separator--thick {
    border-top: 2px solid #e5e7eb;
    margin: 12px 0;
}

/* Texto secundario */
.alq-text-muted {
    color: #6b7280;
    font-size: 12px;
}

/* Texto de error */
.alq-text-danger {
    color: #ef4444;
    font-size: 12px;
}

/* Texto de éxito */
.alq-text-success {
    color: #10b981;
    font-size: 12px;
}

/* Contenedor con padding */
.alq-padded {
    padding: 16px;
}

/* Sin padding extra */
.alq-flush {
    padding: 0;
}

/* --------------------------------------------
   CHECKBOX DENTRO DE BOLD LABEL
   -------------------------------------------- */

/* Elimina el margen por defecto del checkbox en etiquetas de negrita */
.alq-bold-label input[type="checkbox"] {
    margin: 0;
}

/* --------------------------------------------
   SELECTOR DE RAYA (campo de línea en recibo)
   -------------------------------------------- */

/* Select compacto para selección de tipo de raya */
.alq-raya-select {
    padding: 2px 4px;
    border: 1px solid #d1d5db;
    font-size: 10px;
    font-family: inherit;
}

/* --------------------------------------------
   WRAPPER DEL PREVIEW DEL RECIBO
   -------------------------------------------- */

/* Contenedor con overflow hidden para el preview del recibo */
.alq-receipt-preview-wrapper {
    width: 100%;
    overflow: hidden;
}

/* Input de fecha en filtros */
.alq-date-input {
    padding: 3px 8px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    font-size: 12px;
    outline: none;
    font-family: inherit;
}

/* Etiqueta de filtro compacta */
.alq-filter-label {
    font-size: 11px;
    font-weight: 600;
    color: #374151;
}

/* Contenedor de filtros con flex */
.alq-filters-wrap {
    padding: 8px 12px;
}

/* Fila de filtros */
.alq-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

/* Par etiqueta + input en filtros */
.alq-filter-pair {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Etiqueta de stat card (muted) */
.alq-stat-card-label {
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
}

/* Valor principal verde en stat card */
.alq-stat-card-value--green {
    font-size: 18px;
    font-weight: 700;
    color: #059669;
}

/* Valor principal amber en stat card */
.alq-stat-card-value--amber {
    font-size: 18px;
    font-weight: 700;
    color: #d97706;
}

/* Valor principal azul en stat card */
.alq-stat-card-value--blue {
    font-size: 18px;
    font-weight: 700;
    color: #2563eb;
}

/* Botón de impresión de recibo de prueba */
.alq-btn-print-test {
    padding: 6px 14px;
    background: #0d2e7a;
    color: white;
    border: 2px solid #0a2463;
    cursor: pointer;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    margin-top: 10px;
    width: 100%;
}

.alq-btn-print-test:hover {
    background: #1a3a8a;
}

/* ============================================
   CLASES EXTRAÍDAS DE ESTILOS INLINE
   Refactoring: eliminar style="" del JS
   ============================================ */

/* --------------------------------------------
   CHECKBOXES EN LABELS BOLD
   Reemplaza: style="margin: 0;" en <input type="checkbox"> dentro de .alq-bold-label
   -------------------------------------------- */
.alq-bold-label input[type="checkbox"] {
    margin: 0;
}

/* --------------------------------------------
   GRID DE DETALLES DE RAYA
   Reemplaza: style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 11px;"
   -------------------------------------------- */
.alq-raya-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    font-size: 11px;
}

/* --------------------------------------------
   VARIANTE DE CARD CON MARGEN SUPERIOR
   Reemplaza: style="margin-top: 18px;" en .alq-view-card
   -------------------------------------------- */
.alq-view-card--mt {
    margin-top: 18px;
}

/* --------------------------------------------
   CELDA DE TABLA VACÍA CENTRADA
   Reemplaza: style="text-align: center; padding: 20px; color: #6b7280;"
   -------------------------------------------- */
.alq-td-empty-center {
    text-align: center;
    padding: 20px;
    color: #6b7280;
}

/* --------------------------------------------
   BADGES DE ESTADO DE DEPÓSITO
   Reemplaza: la función estadoBadge() con colores inline
   -------------------------------------------- */
.alq-deposito-badge--pendiente {
    background: #fef3c7;
    color: #92400e;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

.alq-deposito-badge--retenido {
    background: #dbeafe;
    color: #1e40af;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

.alq-deposito-badge--devuelto {
    background: #d1fae5;
    color: #065f46;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

.alq-deposito-badge--otro {
    background: #f3f4f6;
    color: #374151;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

/* --------------------------------------------
   CELDAS DE TABLA CON TAMAÑO REDUCIDO
   Reemplaza: style="font-size: 11px;" en <td>
   -------------------------------------------- */
.alq-td-sm {
    font-size: 11px;
}

.alq-td-sm--bold {
    font-size: 11px;
    font-weight: 700;
}

/* --------------------------------------------
   FILAS Y CELDAS DE CONTRATOS ANULADOS
   Reemplaza: estilos inline en tabla de anulados
   -------------------------------------------- */
.alq-tr-anulado {
    opacity: 0.7;
}

.alq-td-strikethrough {
    text-decoration: line-through;
}

.alq-td-sm--truncate {
    font-size: 11px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------
   BOTÓN CERRAR MODAL
   Reemplaza: style="background: none; border: none; color: white; font-size: 18px; cursor: pointer;"
   -------------------------------------------- */
.alq-modal-close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

/* --------------------------------------------
   INPUTS DE MODAL
   Reemplaza: múltiples style= en campos de formularios de modal
   -------------------------------------------- */
.alq-modal-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 12px;
    box-sizing: border-box;
}

.alq-modal-input--readonly {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 12px;
    box-sizing: border-box;
    background: #f9fafb;
    color: #6b7280;
}

.alq-modal-select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 12px;
    box-sizing: border-box;
}

.alq-modal-textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 12px;
    resize: vertical;
    box-sizing: border-box;
}

/* --------------------------------------------
   GRID CON COLUMNA FINAL AUTO (monto + día de pago)
   Reemplaza: style="display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 12px; align-items: end;"
   -------------------------------------------- */
.alq-grid-auto-end {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-bottom: 12px;
    align-items: end;
}

/* --------------------------------------------
   BADGE DÍA DE PAGO
   Reemplaza: style= en el widget de día de pago del contrato activo
   -------------------------------------------- */
.alq-dia-pago-wrap {
    background: #0a2463;
    color: white;
    border-radius: 6px;
    padding: 6px 14px;
    text-align: center;
    min-width: 120px;
}

.alq-dia-pago-label {
    font-size: 9px;
    text-transform: uppercase;
    opacity: 0.8;
    letter-spacing: 0.5px;
    display: block;
}

.alq-dia-pago-valor {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    display: block;
}

/* --------------------------------------------
   LABEL DE RADIO BUTTON EN MODAL DE PAGO
   Reemplaza: style="font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 4px;"
   -------------------------------------------- */
.alq-radio-label {
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --------------------------------------------
   FILA DE TOTAL EN MODAL DE CONCEPTOS
   Reemplaza: style= en la fila de total de conceptos
   -------------------------------------------- */
.alq-total-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 2px solid #0a2463;
}

.alq-total-text {
    font-size: 14px;
    font-weight: 700;
    color: #0a2463;
}

/* --------------------------------------------
   ZONA DE COMPROBANTE (upload de imagen)
   Reemplaza: estilos inline en la zona de subir comprobante
   -------------------------------------------- */
.alq-comprobante-zona {
    border: 2px dashed #d1d5db;
    border-radius: 6px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s;
}

.alq-comprobante-zona p {
    color: #9ca3af;
    font-size: 11px;
    margin: 0;
}

.alq-comprobante-preview {
    margin-top: 6px;
    position: relative;
    display: inline-block;
}

.alq-comprobante-img {
    max-height: 80px;
    border-radius: 4px;
    border: 1px solid #d1d5db;
    display: block;
}

.alq-comprobante-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --------------------------------------------
   ACCIONES EN FOOTER DE MODAL
   Reemplaza: style="display: flex; gap: 6px;"
   -------------------------------------------- */
.alq-modal-actions {
    display: flex;
    gap: 6px;
}

/* --------------------------------------------
   LABEL Y CAMPO DE FORMULARIO EN MODAL
   Reemplaza: style= en etiquetas y wrappers de campos
   -------------------------------------------- */
.alq-modal-label {
    font-size: 11px;
    font-weight: 600;
    display: block;
    margin-bottom: 3px;
    color: #374151;
}

.alq-modal-field {
    margin-bottom: 10px;
}

/* --------------------------------------------
   MODAL DE ANULAR CONTRATO
   Reemplaza: estilos inline en el contenido del modal de anulación
   -------------------------------------------- */
.alq-anular-modal-body {
    padding: 20px;
}

.alq-anular-warning {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #dc2626;
}

.alq-anular-warning i {
    margin-right: 6px;
}

.alq-anular-field {
    margin-bottom: 12px;
}

.alq-anular-label {
    font-size: 12px;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
    color: #374151;
}

/* --------------------------------------------
   MODAL VER DETALLE DE DEPÓSITO
   Reemplaza: estilos inline en modal de detalle de depósito
   -------------------------------------------- */
.alq-deposito-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    font-size: 12px;
    padding: 16px 20px;
}

.alq-deposito-detail-label {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.alq-deposito-detail-value {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

/* --------------------------------------------
   GALERÍA DE FOTOS DE DEPÓSITO
   Reemplaza: estilos inline en thumbnails de fotos
   -------------------------------------------- */
.alq-foto-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 20px;
}

.alq-foto-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: opacity 0.2s;
}

.alq-foto-thumb:hover {
    opacity: 0.8;
}

/* --------------------------------------------
   MODAL GESTIONAR DEPÓSITO
   Reemplaza: estilos inline en el formulario de gestión de depósito
   -------------------------------------------- */
.alq-gestionar-body {
    padding: 20px;
}

.alq-gestionar-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px 0;
}

.alq-gestionar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.alq-gestionar-grid--full {
    grid-column: 1 / -1;
}

/* --------------------------------------------
   CELDA DE MONTO EN TABLA DE PAGOS
   Reemplaza: style="font-weight: 700;" en td de monto
   -------------------------------------------- */
.alq-td-monto--bold {
    font-weight: 700;
}

/* --------------------------------------------
   HISTORIAL DE MESES PAGADOS (sección del modal de pago)
   Reemplaza: estilos inline en el bloque de historial de renta
   -------------------------------------------- */
.alq-meses-title {
    font-size: 11px;
    font-weight: 700;
    color: #0369a1;
    margin-bottom: 6px;
}

.alq-meses-proximo {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #0a2463;
}

/* Encabezado de la zona de conceptos del pago */
.alq-conceptos-header {
    margin-bottom: 8px;
}

.alq-conceptos-title {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: #0a2463;
}

/* --------------------------------------------
   MODAL VER DETALLE DE DEPÓSITO — estructura interna
   Reemplaza: estilos inline en el cuerpo del modal de detalle
   -------------------------------------------- */
.alq-deposito-detail-body {
    padding: 16px;
}

.alq-deposito-detail-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.alq-deposito-amount-main {
    font-size: 20px;
    font-weight: 700;
    color: #0a2463;
}

.alq-deposito-info-box {
    background: #f9fafb;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
}

.alq-deposito-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.alq-deposito-info-label {
    font-size: 10px;
    color: #6b7280;
    font-weight: 600;
}

.alq-deposito-info-value {
    font-size: 12px;
    font-weight: 600;
}

.alq-deposito-info-value--normal {
    font-size: 12px;
}

.alq-deposito-resolucion-box {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
}

.alq-deposito-resolucion-title {
    font-size: 11px;
    font-weight: 700;
    color: #166534;
    margin-bottom: 8px;
}

.alq-deposito-amount--green {
    font-size: 13px;
    font-weight: 700;
    color: #16a34a;
}

.alq-deposito-amount--red {
    font-size: 13px;
    font-weight: 700;
    color: #dc2626;
}

.alq-deposito-amount--amber {
    font-size: 13px;
    font-weight: 700;
    color: #f59e0b;
}

.alq-deposito-motivo-value {
    font-size: 12px;
    background: white;
    padding: 6px 8px;
    border-radius: 4px;
    margin-top: 2px;
}

.alq-deposito-obs-value {
    font-size: 12px;
    background: #f9fafb;
    padding: 6px 8px;
    border-radius: 4px;
    margin-top: 2px;
}

.alq-deposito-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* --------------------------------------------
   RADIO CONTAINER — gap y padding en tipo de pago
   -------------------------------------------- */
.alq-radio-group {
    display: flex;
    gap: 12px;
    padding-top: 4px;
}

/* --------------------------------------------
   SECCIÓN COMISIÓN ADMINISTRATIVA EN GESTIONAR DEPÓSITO
   Reemplaza: estilos inline en la caja de comisión
   -------------------------------------------- */
.alq-comision-box {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 10px;
}

.alq-comision-label {
    color: #92400e;
}

.alq-comision-input {
    border-color: #fcd34d;
}

.alq-comision-hint {
    color: #92400e;
    font-weight: 400;
}

/* Subtítulo interno de la caja de comisión */
.alq-comision-box .alq-flex-between {
    margin-top: 4px;
}

.alq-disponible-label {
    color: #166534;
}

/* Fila de flex con alineación derecha (para botones de acción) */
.alq-flex-end {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}