/* fs-fecha-widget — Variantes con mayor especificidad para evitar overrides del tema */

/* Paleta base (oscuro) */
:root{
  --brand-primary:#0097CE;
  --fs-text:#E9EEF3;
  --fs-muted:#B8C2CC;
  --fs-surface:#0F141A;
  --fs-surface-2:#121920;
  --fs-border:#1F2A33;
  --fs-radius:12px;
  --fs-shadow:0 10px 28px rgba(0,0,0,.55);
  --fs-input-bg:#0E1319;
  --fs-input-border:var(--fs-border);
  --fs-focus-ring:rgba(0,151,206,.18);
}

#fecha-widget {
  position: relative !important;
  display: block !important;
  margin: 20px auto !important; /* opcional: centrado */
}

/* Contenedor base */
#fecha-widget.fs-fecha-card{
  background: var(--fs-surface);
  color: var(--fs-text);
  border:1px solid var(--fs-border);
  border-radius: var(--fs-radius);
  padding:12px;
  box-shadow: var(--fs-shadow);
  width:100%;
  box-sizing:border-box;
  margin-bottom:14px;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* Grid y etiqueta */
#fecha-widget .fs-fecha-grid{ display:flex; gap:12px; align-items:center; }
#fecha-widget .fs-fecha-label{ color: var(--fs-muted); font-size:14px; margin-right:6px; white-space:nowrap; }

/* Input base con especificidad alta */
#fecha-widget .fs-emp-date-input,
#fecha-widget input[type="date"]{
  padding:10px 12px !important;
  border-radius:10px !important;
  border:1px solid var(--fs-input-border) !important;
  background:var(--fs-input-bg) !important;
  /*color: var(--fs-text) !important;*/
  color: #FFF;
  font-size:14px !important;
  box-sizing:border-box;
  transition:border-color .2s, box-shadow .2s, background .2s;
  outline: none;
}
#fecha-widget input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1); /*invertir color icono*/
}
#fecha-widget input[type="date"]:focus{
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 4px var(--fs-focus-ring) !important;
}

/* Botón base con especificidad alta */
#fecha-widget #fs-fecha-consultar{
  background: var(--brand-primary) !important;
  color:#fff !important;
  border:1px solid var(--brand-primary) !important;
  border-radius:999px !important;
  padding:10px 14px !important;
  cursor:pointer;
  font-weight:600;
  box-shadow:0 6px 16px rgba(0,151,206,.22);
  transition:transform .06s ease, background .2s;
}
#fecha-widget #fs-fecha-consultar:hover{ background:#06aeea !important; }
#fecha-widget #fs-fecha-consultar:active{ transform: translateY(1px) scale(.995); }

/* Mensaje */
#fecha-widget #fs-fecha-debug{ color: var(--fs-muted); font-size:13px; margin-top:8px; }

/* Variante: elevated (por defecto, degradado sutil) */
#fecha-widget.fs-fecha-card--elevated{
  background: linear-gradient(180deg, var(--fs-surface-2), var(--fs-surface));
}

/* Variante: minimal */
#fecha-widget.fs-fecha-card--minimal{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 8px 0;
}
#fecha-widget.fs-fecha-card--minimal .fs-fecha-label{ color: var(--fs-text); font-weight:600; }
#fecha-widget.fs-fecha-card--minimal input[type="date"]{
  background: transparent !important;
  border:0 !important;
  border-bottom:2px solid var(--fs-input-border) !important;
  border-radius:0 !important;
  padding:8px 0 !important;
  box-shadow:none !important;
}
#fecha-widget.fs-fecha-card--minimal input[type="date"]:focus{
  border-bottom-color: var(--brand-primary) !important;
  box-shadow:none !important;
}
#fecha-widget.fs-fecha-card--minimal #fs-fecha-consultar{
  background: transparent !important;
  color: var(--brand-primary) !important;
  border:1px solid var(--brand-primary) !important;
  box-shadow:none !important;
}

/* Variante: inline (barra compacta) */
#fecha-widget.fs-fecha-card--inline{
  background: var(--fs-surface-2);
  border:1px solid var(--fs-border);
  padding:8px 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
#fecha-widget.fs-fecha-card--inline .fs-fecha-grid{ flex-wrap:nowrap; gap:10px; }
#fecha-widget.fs-fecha-card--inline .fs-fecha-label{ margin:0 4px 0 0; font-size:13px; }
#fecha-widget.fs-fecha-card--inline input[type="date"]{ padding:8px 10px !important; font-size:13px !important; height:34px !important; }
#fecha-widget.fs-fecha-card--inline #fs-fecha-consultar{ padding:8px 12px !important; height:34px !important; line-height:16px !important; }

/* Móvil */
@media (max-width:900px){
  #fecha-widget .fs-fecha-grid{ flex-direction:column; align-items:stretch; }
  #fecha-widget .fs-fecha-grid input, #fecha-widget .fs-fecha-grid button{ width:100%; }
}