/* ═══════════════════════════════════════════════════════════════════════════
   fechaTheme.css — Tema global de los campos de fecha (financiApp)
   ---------------------------------------------------------------------------
   Da a TODOS los campos de fecha del sistema el mismo aspecto que los filtros
   del Reporte de Pendientes de Conciliación: caja blanca de borde suave,
   esquinas de 6px, calendario azul a la izquierda y anillo de foco.

   ¿A qué campos alcanza?
     1) A todo campo de fecha de las vistas: js/fechaTheme.js los reconoce y les
        pone la clase "app-fecha" solo, sin tocar los módulos. Si el campo venía
        dentro de una cajita propia (input-group con addon, o el envoltorio que
        se armó cada módulo), esa caja se apaga y su calendario repetido se
        oculta: la única caja pasa a ser la del input.
     2) A los <input type="date|datetime-local|month"> nativos, por selector.
     3) A cualquier input al que se le escriba class="app-fecha" a mano.

   Cómo quedarse fuera del tema
        <input class="fecha no-fecha-tema">   o   data-fecha-tema="off"

   ALTO
     34px por defecto (el de .form-control). Se declara SIN !important a
     propósito: un módulo que calibra el alto de su fila de filtros
     (p. ej. ".pp-filter-grid .form-control { height: 36px; }") sigue mandando.
     La identidad visual (borde, esquinas, fondo, ícono) sí es !important
     porque es lo que debe verse igual en todo el proyecto.

   EL ÍCONO
     Es el mismo calendario de Font Awesome que usan los reportes (fa-calendar,
     \f073), sacado del contorno de la propia fuente del proyecto y pegado como
     SVG en el fondo del input. Va de fondo y no como <i> para no tener que
     agregarle un envoltorio a cada campo de las vistas.

   COLOR
     Al ir dentro del SVG, el azul (#0a6ed1) es literal: un data-uri no puede
     leer var(--sgi-color). Si el sistema se retematiza, se cambia aquí (una
     sola vez, en la regla de abajo).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --fecha-alto:        34px;
    --fecha-accent:      var(--sgi-color, #0a6ed1);
    --fecha-borde:       #e2e8f0;
    --fecha-borde-hover: color-mix(in srgb, var(--fecha-accent), #fff 74%);
    --fecha-ring:        rgba(var(--sgi-color-rgb, 10,110,209), .14);
    --fecha-texto:       #1f2d3d;
    --fecha-placeholder: #94a3b8;
    --fecha-fondo-off:   #f1f5f9;
}

/* ── La caja ─────────────────────────────────────────────────────────────── */
input.app-fecha,
input[type="date"],
input[type="datetime-local"],
input[type="month"] {
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-68 60 1800 1800' fill='%230a6ed1'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M128 -128h288v288h-288v-288zM480 -128h320v288h-320v-288zM128 224h288v320h-288v-320zM480 224h320v320h-320v-320zM128 608h288v288h-288v-288zM864 -128h320v288h-320v-288zM480 608h320v288h-320v-288zM1248 -128h288v288h-288v-288zM864 224h320v320h-320v-320zM512 1088v288q0 13 -9.5 22.5t-22.5 9.5h-64q-13 0 -22.5 -9.5t-9.5 -22.5v-288q0 -13 9.5 -22.5t22.5 -9.5h64q13 0 22.5 9.5t9.5 22.5zM1248 224h288v320h-288v-320zM864 608h320v288h-320v-288zM1248 608h288v288h-288v-288zM1280 1088v288q0 13 -9.5 22.5t-22.5 9.5h-64q-13 0 -22.5 -9.5t-9.5 -22.5v-288q0 -13 9.5 -22.5t22.5 -9.5h64q13 0 22.5 9.5t9.5 22.5zM1664 1152v-1280q0 -52 -38 -90t-90 -38h-1408q-52 0 -90 38t-38 90v1280q0 52 38 90t90 38h128v96q0 66 47 113t113 47h64q66 0 113 -47t47 -113v-96h384v96q0 66 47 113t113 47h64q66 0 113 -47t47 -113v-96h128q52 0 90 -38t38 -90z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 10px center !important;
    background-size: 15px 15px !important;
    border: 1px solid var(--fecha-borde) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    padding: 0 10px 0 32px !important;
    height: var(--fecha-alto);
    font-size: 12.5px;
    color: var(--fecha-texto);
    transition: border-color .15s, box-shadow .15s;
}

input.app-fecha::placeholder,
input[type="date"]::placeholder,
input[type="datetime-local"]::placeholder,
input[type="month"]::placeholder { color: var(--fecha-placeholder); }

input.app-fecha:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="month"]:hover { border-color: var(--fecha-borde-hover) !important; }

input.app-fecha:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus {
    outline: none !important;
    border-color: var(--fecha-accent) !important;
    box-shadow: 0 0 0 3px var(--fecha-ring) !important;
}

/* Los campos de fecha suelen ser readonly (se llenan con el calendario): el
   gris que Bootstrap le pone a [readonly] los hacía ver apagados, así que se
   dejan blancos. El gris se reserva para lo que de verdad está bloqueado. */
input.app-fecha[disabled],
input[type="date"][disabled],
input[type="datetime-local"][disabled],
input[type="month"][disabled] {
    background-color: var(--fecha-fondo-off) !important;
    color: var(--fecha-placeholder) !important;
    cursor: not-allowed !important;
    opacity: 1;
}

/* ── Tamaño compacto (input-sm) ──────────────────────────────────────────── */
input.app-fecha.input-sm,
input.input-sm[type="date"],
input.input-sm[type="datetime-local"],
input.input-sm[type="month"] {
    height: 30px;
    font-size: 12px;
    padding: 0 9px 0 29px !important;
    background-position: left 9px center !important;
    background-size: 13px 13px !important;
}

/* ── Fecha nativa del navegador ──────────────────────────────────────────────
   El ícono propio del navegador iría a la derecha y saldría junto al nuestro.
   Se estira invisible sobre todo el campo: desaparece de la vista y, de paso,
   un clic en cualquier punto abre el calendario. ──────────────────────────── */
input[type="date"],
input[type="datetime-local"],
input[type="month"] { position: relative; }

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    margin: 0; padding: 0; opacity: 0; cursor: pointer;
}

/* ── Campos que venían dentro de una cajita propia ───────────────────────────
   Muchas vistas envuelven la fecha en un .input-group con addon de calendario,
   y varios módulos se armaron su propio envoltorio (.tc-input-group, .rfe-date,
   .rst-date…). Ahí la caja la dibujaba el envoltorio: se le apaga para que la
   única caja visible sea la del input, y su calendario repetido se oculta.
   Las clases las pone js/fechaTheme.js. ─────────────────────────────────── */
.app-fecha-oculto { display: none !important; }

.app-fecha-grupo {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: visible !important;   /* si recortaba, se comía el anillo de foco */
}
/* Sin el addon, el input deja de ser "la mitad izquierda" del grupo y recupera
   las cuatro esquinas. */
.app-fecha-grupo > input.app-fecha { border-radius: 6px !important; }

/* El .input-group de Bootstrap es una TABLA (display:table, ancho automático):
   con el addon oculto se encogía al ancho natural del input en vez de llenar la
   columna. Se le devuelve el ancho pasándolo a bloque; el input deja de ser
   celda flotada y ocupa todo el ancho.
   Los envoltorios propios de los módulos (.tc-input-group, .rfe-date…) no
   entran acá: ya son bloques y su input estira solo. */
.input-group.app-fecha-grupo { display: block !important; width: 100% !important; }
.input-group.app-fecha-grupo > input.app-fecha {
    display: block !important; float: none !important; width: 100% !important;
}