/* ==========================================================================
   ESTILOS PROPIOS DE ESTE ERP
   Reglas del style.css anterior que usan clases que no existen en el diseño
   común (GRAMMA). Se carga después de style.css y marca.css.
   ========================================================================== */

.observaciones { background-color: var(--comment-light); color: #fff; border: none; }
.card-mes { border-top: 4px solid #3498db; }
.card-anio { border-top: 4px solid #9b59b6; }
.card-hoy { border-top: 4px solid #f1c40f; }
.card-retraso { border-top: 4px solid #e74c3c; }
.kanban-header { font-weight: 700; color: var(--secondary); margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid #ccc; padding-bottom: 8px; }
.border-pend { border-bottom-color: #f1c40f; }
.card-pend { border-left-color: #f1c40f; }
.border-prod { border-bottom-color: #3498db; }
.card-prod { border-left-color: #3498db; }
.border-term { border-bottom-color: #2ecc71; }
.card-term { border-left-color: #2ecc71; }
.alineado-centro { text-align: center !important; }
.campoform-tabla { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.95rem; font-family: var(--font-main); }
#tabla-items-body tr { transition: background 0.3s; }
.loading-overlay { opacity: 0.5; pointer-events: none; }
.bloque-totales { display: flex; justify-content: flex-end; margin-top: 20px; margin-bottom: 40px; }
.tabla-totales { width: 300px; border-collapse: collapse; }
.tabla-totales th { text-align: right; padding: 10px; color: #666; font-weight: normal; background: none; }
.tabla-totales td { text-align: right; padding: 10px; font-weight: bold; color: #333; border-bottom: 1px solid #eee; }
.tabla-totales .fila-total-final th, .tabla-totales .fila-total-final td { border-top: 2px solid #333; border-bottom: none; font-size: 1.2rem; color: #000; padding-top: 15px; }
.btn-add-tabla { background-color: #27ae60; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; transition: background 0.3s; }
.btn-add-tabla:hover { background-color: #219150; }
.btn-borrar-tabla { color: #e74c3c; font-size: 1.1rem; cursor: pointer; background: none; border: none; }
.btn-borrar-tabla:hover { color: #c0392b; }
.etiqueta-recargo { display: inline-block; background-color: #e67e22; color: white; font-size: 0.7rem; padding: 2px 5px; border-radius: 4px; font-weight: bold; margin-left: 5px; vertical-align: middle; }
@media (max-width: 1250px) {
    table.listado .oculto-movil, .listado th.oculto-movil, .listado td.oculto-movil { display: none !important; width: 0 !important; padding: 0 !important; border: none !important; }
}
.btn-add-texto { background-color: var(--primary); color: white; border: none; padding: 8px 16px; border-radius: 4px; font-weight: 600; cursor: pointer; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.5px; transition: background 0.3s; }
.btn-add-texto:hover { background-color: var(--primary-dark); }
.handle-drag { cursor: grab !important; }
.handle-drag:active { cursor: grabbing !important; }
.ui-state-highlight { height: 45px; background-color: #fdfdfd; border: 1px dashed #ccc; }
.tabla-totales { width: 450px !important; max-width: 100%; }
.tabla-totales th { width: 60%; }
.fila-spacer td { height: 25px; background: #fff; border: none !important; }
.fila-add-item { background-color: #f4f8fb; }
.fila-add { background: #f9f9f9; border-top: 2px solid #eee; }
.input-add { width: 100%; padding: 6px; border: 1px solid #ddd; border-radius: 3px; box-sizing: border-box; }
.fila-add-item td { border-top: 2px solid #cbd5e0 !important; padding-top: 15px !important; padding-bottom: 15px !important; }
.icono-plus-add { float: left; padding: 12px 4px; color: #ccc; font-size: 0.8rem; width: 25px; text-align: left; }
.wrapper-input-add { margin-left: 30px; }
.contenedor-form-proforma { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.fila-datos-cliente { width: 100%; }
.input-obs-internas { background-color: #fffbe6 !important; }
.select-compacto { padding-left: 0 !important; padding-right: 0 !important; text-align: center; }
.contenedor-totales-right { display: flex; justify-content: flex-end; margin-top: 20px; }
.modo-lectura .btn-borrar-tabla, .modo-lectura .handle-drag, .modo-lectura .icono-plus-add, .modo-lectura .fila-add-item { display: none !important; }
.modo-lectura .btn-borrar-tabla, .modo-lectura .handle-drag, .modo-lectura .icono-plus-add { display: none !important; }
.img-ajustada { Max-width: 500px; max-height: 300px; }

/* ==========================================================================
   MÓDULO DE SUSCRIPCIONES (solo REMIAN ERP)
   ========================================================================== */
.kpis-sus { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 20px; }
.kpi-sus { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid #e8ecf0; border-left: 4px solid var(--primary);
    padding: 16px 18px; display: flex; align-items: center; gap: 14px; }
.kpi-sus > i { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: rgba(var(--primary-rgb), 0.12); color: var(--primary-dark); font-size: 1.1rem; flex: 0 0 42px; }
.kpi-sus b { display: block; font-size: 1.35rem; font-weight: 600; color: var(--secondary); line-height: 1.2; }
.kpi-sus span { font-size: 0.8rem; color: var(--text-muted); }
.kpi-sus.aviso { border-left-color: #e74c3c; }
.kpi-sus.aviso > i { background: #fdecea; color: #c0392b; }

.alerta-ok-sus, .alerta-error-sus { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 15px; font-weight: 500; }
.alerta-ok-sus { background: #e8f8f0; color: #1e7e44; border: 1px solid #b7e4c7; }
.alerta-error-sus { background: #fdecea; color: #a93226; border: 1px solid #f5c6cb; }

.titulo-sus { font-size: 1.5rem !important; color: var(--primary-dark) !important; }
.resumen-sus p { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #eee; margin: 0; }
.resumen-sus p:last-child { border-bottom: 0; }
.resumen-sus span { color: var(--text-muted); font-size: 0.85rem; }
.resumen-sus b { text-align: right; font-weight: 600; color: var(--secondary); }
.resumen-sus a { color: var(--primary-dark); }

.acciones-sus { display: flex; flex-direction: column; gap: 10px; }
.btn-sus { width: 100%; padding: 10px 14px; border-radius: 6px; border: 1px solid #ddd; background: #f8f9fa; color: #444; font: inherit; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; gap: 8px; justify-content: center; transition: all .2s; }
.btn-sus:hover { background: #eef1f4; }
.btn-sus.principal { background: linear-gradient(90deg, var(--primary), var(--primary-dark)); color: #fff; border-color: transparent; }
.btn-sus.principal:hover { box-shadow: 0 4px 12px rgba(var(--primary-rgb), .35); }
.btn-sus.peligro { color: #c0392b; border-color: #f1c4c0; background: #fff; }
.btn-sus.peligro:hover { background: #fdecea; }
.form-inline-sus { display: inline; }
.btn-icono-sus { background: none; border: 0; cursor: pointer; color: var(--primary-dark); font-size: 1rem; margin-left: 10px; padding: 0; }

.titulo-seccion-sus { margin: 10px 0 5px; font-size: 1rem; font-weight: 600; color: var(--secondary); }
.tabla-lineas-sus { margin-bottom: 10px; }
.tabla-lineas-sus td { padding: 6px 8px !important; }
.tabla-lineas-sus .campoform { width: 100%; margin: 0; }
.check-linea { display: flex !important; align-items: center; gap: 8px; font-weight: 500 !important; cursor: pointer; padding-top: 10px; }
.contenedor-form-proforma .grupo, .contenedor-form-proforma .sub-grupo { display: flex; flex-direction: column; }

@media (max-width: 900px) {
    .kpis-sus { grid-template-columns: 1fr 1fr; }
    .tabla-lineas-sus thead { display: none; }
    .tabla-lineas-sus tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 0; border-bottom: 1px solid #eee; }
    .tabla-lineas-sus td:first-child { grid-column: 1 / -1; }
}