.loock_date_wrapper {
        max-width: 1100px;
        margin: 20px auto;
        padding: 20px;
        background: #ffffff;
        border-radius: 18px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
    .loock_date_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 18px;
    }
    .loock_date_title {
        font-size: 20px;
        font-weight: 600;
        color: #222;
    }
    .loock_date_clientid {
        font-size: 13px;
        color: #666;
    }
    .loock_date_rows{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1100px){
  .loock_date_rows{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .loock_date_rows{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

    .loock_date_row {
        padding: 14px 16px;
        border-radius: 14px;
        border: 1px solid #e2e6ea;
        background: linear-gradient(135deg,#f9fafb,#ffffff);
        display: flex;
        flex-wrap: wrap;
        gap: 10px 25px;
        align-items: center;
    }
    .loock_date_field {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 170px;
        flex: 1 1 170px;
    }
    .loock_date_label {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #292929;
        font-weight: 600;
    }
    .loock_date_input,
    .loock_date_input_number,
    .loock_date_output {
        width: 100%;
        border-radius: 10px !important;
        border: 1px solid #5d5d5d !important;
        padding: 7px 10px !important;
        font-size: 14px !important;
        color: #111 !important;
        background-color: #fff;
        box-sizing: border-box !important;
    }
    .loock_date_input:focus,
    .loock_date_input_number:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 1px rgba(37,99,235,0.2);
    }
    .loock_date_output {
        background: #f3f4f6;
    }
    .loock_date_badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 5px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        min-width: 90px;
        text-align: center;
    }
    .loock_date_badge-green {
        background: #d1fae5;
        color: #065f46;
    }
    .loock_date_badge-orange {
        background: #ffedd5;
        color: #9a3412;
    }
    .loock_date_badge-red {
        background: #fee2e2;
        color: #991b1b;
    }
    .loock_date_badge-gray {
        background: #e5e7eb;
        color: #374151;
    }
    .loock_date_meta {
        font-size: 11px;
        color: #6b7280;
        margin-top: 4px;
    }

    .loock_date_btn_save {
        border: none;
        border-radius: 999px;
        padding: 7px 16px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        background: linear-gradient(135deg,#2563eb,#1d4ed8);
        color: white;
        box-shadow: 0 4px 14px rgba(37,99,235,0.35);
        transition: transform 0.05s ease, box-shadow 0.05s ease, background 0.15s ease;
    }
    .loock_date_btn_save:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(37,99,235,0.45);
    }
    .loock_date_btn_save:active {
        transform: translateY(0);
        box-shadow: 0 3px 10px rgba(37,99,235,0.3);
    }
    .loock_date_notice {
        max-width: 600px;
        margin: 20px auto;
        padding: 12px 16px;
        border-radius: 12px;
        background: #fef3c7;
        color: #92400e;
        font-size: 14px;
    }
    .loock_date_status_msg {
        font-size: 12px;
        color: #6b7280;
        margin-top: 2px;
        min-height: 14px;
    }
    @media (max-width: 768px) {
        .loock_date_row {
            padding: 12px;
        }
        .loock_date_actions {
            align-items: stretch;
        }
        .loock_date_btn_save {
            width: 100%;
        }
    }

        .loock_date_badge-red {
        background: #fee2e2;
        color: #991b1b;
        animation: loock_date_pulse 1.2s infinite alternate;
    }
   
    .loock_date_btn_history {
        border: none;
        border-radius: 999px;
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        background: #f3f4f6;
        color: #374151;
    }
    .loock_date_btn_history:hover {
        background: #e5e7eb;
    }
    @keyframes loock_date_pulse {
        0% { transform: translateY(0); box-shadow: 0 0 0 rgba(220,38,38,0.0); }
        100% { transform: translateY(-1px); box-shadow: 0 0 16px rgba(220,38,38,0.4); }
    }
    /* Remove arrows on number input (Chrome, Safari, Edge) */
.loock_date_input_number::-webkit-outer-spin-button,
.loock_date_input_number::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Remove arrows on number input (Firefox) */
.loock_date_input_number {
    -moz-appearance: textfield;
}
.loock_date_field:has(.loock_date_input_number) {
    flex: 0 0 120px !important;
}
/* Make Closing Date field narrower */
.loock_date_field:has(.loock_date_output) {
    flex: 0 0 140px !important; /* ajusta el ancho que quieras */
    min-width: 140px !important;
}
/* Make Closing Date calendar */
.loock_date_field:has(.loock_date_input_date) {
    flex: 0 0 140px !important; /* ajusta el ancho que quieras */
    min-width: 140px !important;
} 
/* LOCK EXPIRES */
.loock_date_field:has(.loock_date_badge) {
    flex: 0 0 220px !important;
    min-width: 220px !important;
}    
.loock_date_output_closing { 
border: 0 !important;
    font-weight: 700;
    font-size: 16px !important;
    padding: .5rem 0 !important;   
} 



/* Ajuste visual del botón History para que tenga forma de botón */
.loock_date_btn_history {
    padding: 6px 12px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.loock_date_btn_history:hover {
    background: #d1d5db;
}
/* Actions: buttons + meta text inline */
.loock_date_actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex: 0 0 450px !important; /* ajusta el ancho si quieres menos espacio */
}

/* Inline meta text */
.loock_date_meta_inline {
    font-size: 12px;
    color: #080808;
    white-space: nowrap; /* evita saltos innecesarios */
    opacity: 0.85;
}
.loock_date_btn_save {
    white-space: nowrap !important;
}
/* ==== MODAL OVERLAY ==== */
.loock_date_modal_overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    padding: 20px;
}

/* ==== MODAL WINDOW ==== */
.loock_date_modal {
    background: #ffffff;
    width: 90%;
    max-width: 1000px; /* 👈 MÁS ANCHO */
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: loock_date_fadein 0.2s ease-out;
}

/* Animación suave */
@keyframes loock_date_fadein {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}

/* ==== HEADER ==== */
.loock_date_modal_header {
    padding: 16px 20px;
    background: #2314f0ff;
    color: #ffffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.loock_date_modal_title {
    font-size: 18px;
    font-weight: 600;
}

.loock_date_modal_close {
    border: none;
    background: transparent;
    color: white;
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
}

/* ==== BODY ==== */
.loock_date_modal_body {
    padding: 20px;
    overflow-y: auto;
}

/* ==== HISTORY TABLE ==== */
.loock_date_modal_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.loock_date_modal_table th {
    text-align: left;
    background: #f3f4f6;
    padding: 10px;
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap; /* 👈 No se parte el texto */
}

.loock_date_modal_table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap; /* 👈 evita saltos innecesarios */
}

/* Filas alternadas */
.loock_date_modal_table tr:nth-child(even) td {
    background: #fafafa;
}

/*AJUSTE DE ENCABEZADO*/
/* --- CALENDAR GIF ICON --- */
.loock_date_gif_icon {
    width: 94px;
    height: 94px;
    object-fit: contain;
    margin-right: 8px;
    border-radius: 6px;
    animation: loock_date_icon_float 2s ease-in-out infinite;
}

/* Pequeña animación elegante */
@keyframes loock_date_icon_float {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

.loock_date_title {
    display: flex;
    align-items: center;
    font-size: 22px;
    font-weight: 700;
    color: #1d4ed8;
    gap: 10px;
}
.loock_date_days_group {
    display: flex;
    gap: 6px;
    align-items: center;
}

.loock_date_days_group .loock_date_input_number {
    max-width: 90px;
}


.loock_date_field_days .loock_date_days_group {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.loock_date_days_item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 90px;
}

.loock_date_days_small_label {
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    color: #181818ff;
}
.loock_date_juntos{
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    border: solid 1px #7d7d7d;
    border-radius: 15px;
}
    
/* =========================
   Cards UI (Dashboard style)
   ========================= */
.loock_date_card{
  width: 100%;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 16px;
  padding: 14px 14px 12px;
  text-align: center;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.loock_date_card:hover{
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}
.loock_date_card:active{
  transform: translateY(-1px);
}

.loock_date_card_icon{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 8px;
  font-size: 34px;
  color: #2563eb;
}
.loock_date_card_title{
  font-weight: 800;
  font-size: 16px;
  color:#111827;
  line-height: 1.15;
  min-height: 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 6px;
}
.loock_date_card_sub{
  margin-top: 6px;
  font-size: 13px;
  color: #111827;
  font-weight: 600;
}
.loock_date_card_sub_muted{
  color:#9ca3af;
  font-weight: 600;
}
.loock_date_card_footer{
  margin-top: 10px;
  display:flex;
  justify-content:center;
}

.loock_date_card_badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

/* Reusar tus colores */
.loock_date_card_badge.loock_date_badge-green{ background:#d1fae5; color:#065f46; }
.loock_date_card_badge.loock_date_badge-orange{ background:#ffedd5; color:#9a3412; }
.loock_date_card_badge.loock_date_badge-red{ background:#fee2e2; color:#991b1b; }
.loock_date_card_badge.loock_date_badge-gray{ background:#e5e7eb; color:#374151; }

/* =========================
   Offcanvas tweaks
   ========================= */
.loock_date_offcanvas{
  width: 520px;
}
@media (max-width: 640px){
  .loock_date_offcanvas{ width: 100%; }
}
.loock_date_offcanvas_header{
  border-bottom: 1px solid #e5e7eb;
}
.loock_date_offcanvas_head_left{
  display:flex;
  align-items:center;
  gap: 10px;
}
#loock_date_offcanvas_icon{
  font-size: 22px;
  color:#2563eb;
}

/* Fallback backdrop (si falta bootstrap.js) */
.offcanvas-backdrop-fallback::before{
  content:'';
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.35);
  z-index: 1040;
}
/* =========================
   Card hover – elegante
   ========================= */
.loock_date_card{
  position: relative;
  overflow: hidden;
}

/* efecto general */
.loock_date_card:hover{
  border-color: #3b82f6; /* azul suave */
  box-shadow: 
    0 12px 28px rgba(37, 99, 235, 0.18),
    0 2px 6px rgba(0,0,0,0.08);
}

/* glow sutil desde abajo */
.loock_date_card::after{
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height: 0;
  background: linear-gradient(
    180deg,
    rgba(37,99,235,0.0),
    rgba(37,99,235,0.10)
  );
  transition: height .25s ease;
  pointer-events:none;
}
.loock_date_card:hover::after{
  height: 40%;
}

/* icono cobra vida */
.loock_date_card:hover .loock_date_card_icon{
  color: #1d4ed8;
  transform: scale(1.08);
}

/* título un poco más fuerte */
.loock_date_card:hover .loock_date_card_title{
  color: #1e3a8a;
}

/* badge un poco más contrastado */
.loock_date_card:hover .loock_date_card_badge{
  filter: brightness(1.05);
}

/* transición fina */
.loock_date_card,
.loock_date_card_icon,
.loock_date_card_title,
.loock_date_card_badge{
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease,
    color .2s ease,
    filter .2s ease;
}
/* Evitar que estilos globales de <button> pinten la card en hover */
.loock_date_card,
.loock_date_card:hover,
.loock_date_card:focus,
.loock_date_card:active{
  background: #fff !important;
  color: inherit !important;
}

/* Quitar “highlight” raro al hacer click */
.loock_date_card:focus{
  outline: none !important;
  box-shadow: 
    0 12px 28px rgba(37, 99, 235, 0.18),
    0 2px 6px rgba(0,0,0,0.08) !important;
}

/* Si algún CSS le mete background a los hijos (por ejemplo spans) */
.loock_date_card *{
  background: transparent !important;
}

/* Mantener acciones en fila */
.loock_date_actions{
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap; /* CLAVE: permite salto de línea */
}

/* Forzar que el meta vaya a la siguiente línea */
.loock_date_meta_inline{
  flex-basis: 100%;   /* ocupa toda la fila */
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
}

/* Opcional: el mensaje de estado también abajo */
.loock_date_status_msg{
  flex-basis: 100%;
  margin-top: 4px;
}

/*BLOQUEO NUEVO*/
.loock_date_locked{
  background: #f5f6f8 !important;
  cursor: not-allowed !important;
  opacity: .85;
}