/* === BRAND STYLES APPLIED (micro-ajustes: colores/hover/radios) === */

@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Montserrat:wght@400;500;700&display=swap');

/* ---------------------------------------
   Tokens de marca (colores + radios)
---------------------------------------- */
:root {
  --fc-text:   #231F20; /* Brand black */
  --fc-blue:   #1E2A5B; /* Azul principal */
  --fc-gray:   #C1CCD1; /* Gris claro */
  --fc-orange: #FF4F00; /* Naranja acento */
  --fc-orange-hover: #d94300;
  --fc-bg:     #f7f9fa;
  --fc-white:  #ffffff;

  --fc-radius: 12px;
}

/* ---------------------------------------
   General
---------------------------------------- */

.index-view *, 
.index-view *::before, 
.index-view *::after {
  box-sizing: border-box; 
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--fc-bg);
  color: var(--fc-text);
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: 420px;
  padding: 20px 16px;
  margin-top: 20px;
}

/* Logo */
#logo {

  width: 60%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  margin:20% 20%;
  margin-bottom: 15px;
}
 #logo text { font-family: 'Montserrat', sans-serif; font-weight: 700; }

#logoBar {
  width: 80%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  margin:1% 10%;
  margin-bottom: 15px;
}

/* Headings */
h2 {
  font-size: 1.6em;
  text-align: center;
  margin-bottom: 16px;
  font-family: 'Michroma', sans-serif;
  color: var(--fc-blue);
  text-transform: uppercase;
}

/* Forms */
form {
  background: var(--fc-white);
  border-radius: var(--fc-radius);
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

label {
  display: block;
  font-weight: 600;
  font-size: 0.95em;
  margin-bottom: 6px;
  color: var(--fc-blue);
}

input,
select,
textarea {
  width: 100%;
  padding: 12px;
  font-size: 1em;
  border-radius: 8px;
  border: 1px solid var(--fc-gray);
  margin-bottom: 16px;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
  background-color: var(--fc-white);
  color: var(--fc-text);
}


#timeForm input[type="text"]{
     width: 100%; 
}

#rate{
  text-align: right;
}

textarea {
  resize: none;
}

/* Estado de foco (accesible, solo color/sombra) */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--fc-blue);
  box-shadow: 0 0 0 3px rgba(30, 42, 91, 0.15);
}

/* Botones */
button {
  background-color: var(--fc-orange);
  color: white;
  font-size: 1.1em;
  padding: 14px;
  border: none;
  border-radius: var(--fc-radius);
  width: 100%;
  margin-top: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}

button:hover {
  background-color: var(--fc-orange-hover);
}

button .material-icons {
  margin-right: 6px;
  font-size: 20px;
}

button:disabled {
  background-color: #ccc !important;
  color: #666 !important;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Mensajes */
#welcomeMsg, #companyInfo {
  text-align: center;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--fc-blue);
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  white-space: normal;
}

#status {
  margin-top: 12px;
  text-align: center;
  font-weight: bold;
}

/* Flex layout for break selectors */
.break-select {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.break-select select {
  flex: 1;
}

/* Dark Mode */
body.dark {
  background-color: #1f1f1f;
  color: #e0e0e0;
}

body.dark input,
body.dark select,
body.dark textarea {
  background-color: #2a2a2a;
  color: #f9f9f9;
  border-color: #444;
}

body.dark form {
  background-color: #2e2e2e;
}

body.dark button {
  background-color: var(--fc-orange);
}

body.dark button:hover {
  background-color: var(--fc-orange-hover);
}

/* Utility */
.hidden {
  display: none;
}

/* Sidebar menu */
.sidebar-menu {
  position: fixed;
  left: 0;
  top: 0;
  width: 220px;
  height: 100vh;
  background-color: var(--fc-blue);
  color: white;
  padding-top: 60px;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  z-index: 100;
}

.sidebar-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-menu li {
  margin: 0;
  padding: 0;
}

.sidebar-menu a {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s;
}

.sidebar-menu a:hover {
  background-color: #2a3660;
}

.sidebar-menu .material-icons {
  margin-right: 10px;
}

.caret {
  margin-left: 28px;
  vertical-align: middle;
}

/* Submenu base */
.sidebar-menu .has-submenu > a {
  margin-right:20px;
}

.sidebar-menu .submenu-arrow {
  font-size: 18px;
  transition: transform 0.2s ease;
}

/* Ocultar submenú por defecto */
.sidebar-menu .submenu {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #2a3660;
}

.sidebar-menu .submenu li a {
  padding: 10px 20px 10px 40px;
  font-size: 0.95em;
  background-color: #2a3660;
}

.sidebar-menu .submenu li a:hover {
  background-color: #37467d;
}

/* Estado abierto */
.sidebar-menu .has-submenu.open > .submenu {
  display: block;
}

.sidebar-menu .has-submenu.open > a .submenu-arrow {
  transform: rotate(180deg);
}

/* Modal */
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  box-sizing: border-box; 
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 10px; /* (dejé 10px como lo tenías, radios generales se aplican en botones/inputs) */
  width: 90%;
  max-width: 400px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.modal-buttons {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 15px;
}

.modal-buttons button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: bold;
  padding: 10px;
  border: none;
  border-radius: 6px; /* respeta tu valor original de botones secundarios en modal */
  background-color: var(--fc-orange);
  color: white;
  transition: background-color 0.2s ease;
}

.modal-buttons button:hover {
  background-color: var(--fc-orange-hover);
}

.modal-buttons .material-icons {
  font-size: 18px;
}

/* Loading overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-overlay .spinner {
  text-align: center;
  color: var(--fc-blue);
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
}

.loading-overlay .spin {
  font-size: 48px;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#addEmployeeForm input,
#addEmployeeForm select {
  border: 1px solid var(--fc-gray);
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
}

/* Desktop layout */
@media (min-width: 1024px) {
  .container,
  .supervisor-container {
    margin-left: 240px;
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3px);
  }

  form {
    padding: 24px;
  }

  input, select, textarea {
    font-size: 1.05em;
  }
  

}

/* Mobile adjustments */
@media (max-width: 1023px) {
  .sidebar-menu {
    display: none;
  }
  
 
}

@media (max-width: 500px) {
  body {
    overflow-x: hidden;
  }

  .container {
    padding: 16px 12px;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
  }

  form {
    width: 100%;
    max-width: 100%;
    padding: 16px 12px;
    margin: 0;
    box-sizing: border-box;
  }

  #date,
  #start,
  #end {
    width: 100%;
  }
  
     #timeForm input{
     width: 93%; 
}

#daysCount input{
     width: 100%; 
}
  .break-select {
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
  }

  .break-select select {
    flex: 1 1 48%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #welcomeMsg,
  #companyInfo {
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    white-space: normal;
  }

  button {
    font-size: 1em;
    padding: 12px;
    width: 100%;
  }
}



.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.hidden {
  display: none;
}



:root {
  --toast-bg-error: #f44336;
  --toast-bg-success: #4CAF50;
  --toast-bg-info: #2196F3;
  --toast-bg-warning: #FF9800;
}

.toast {
  position: fixed;
  top: 150px;
  left: 0 50%;
  transform: translateX(-50%) translateY(10px);

  background-color: var(--toast-bg-info); /* se mantiene dinámico */
  color: white;
  padding: 18px 28px;
  border-radius: 8px;

  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6); /* más contraste */

  border: 2px solid rgba(255, 255, 255, 0.3); /* marco sutil que lo hace resaltar */
  box-shadow: 0 6px 14px rgba(0,0,0,0.35); /* sombra más marcada */

  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  z-index: 1000;
  width: 325px;
  text-align: center;
}

#toast-message-confirm { white-space: pre-line; }

/* ===== Modal base (no rompe tus otros modales) ===== */
#dashDetailModal.modal{
  position: fixed; inset: 0;
  background: rgba(15,23,42,.55);           /* scrim */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
#dashDetailModal.hidden{ display: none !important; }

#dashDetailModal .modal-content{
  width: min(900px, 92vw);
  background: #fff; color: #0f172a;
  border: 1px solid rgba(30,42,91,.15);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  overflow: hidden;
}

/* ===== Modal base ===== */
#dashDetailModal.modal{
  position: fixed; inset: 0;
  background: rgba(15,23,42,.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
#dashDetailModal.hidden{ display: none !important; }

#dashDetailModal .modal-content{
  position: relative;                         /* <- para anclar la X adentro */
  width: min(900px, 92vw);
  background: #fff; color: #0f172a;
  border: 1px solid rgba(30,42,91,.15);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  overflow: hidden;
  /* Tipografía de marca */
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Header + botón cerrar */
#dashDetailModal .modal-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 14px 16px;
  background: linear-gradient(180deg,#f8fafc,#fff);
  border-bottom: 1px solid #e5e7eb;
}
#dashModalTitle{
  margin:0;
  font-family: 'Michroma', sans-serif;        /* Título con Michroma */
  text-transform: uppercase;
  letter-spacing: .02em;
  color:#1E2A5B;
}
#dashDetailModal .modal__close{
  position:absolute; top:10px; right:10px;    /* <- siempre dentro del modal */
  background: transparent; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1; opacity: .8;
}
#dashDetailModal .modal__close:hover{ opacity: 1; }

/* Cuerpo desplazable */
#dashDetailModal .modal-body{
  padding: 10px 16px 16px;
  max-height: min(70vh, 560px);
  overflow: auto;                              /* scroll vertical/horizontal */
}

/* ===== Tabla ===== */
#dashDetailModal table{
  width: 100%;                                 /* <- ancho completo */
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;                         /* respeta anchos de columnas */
  font-variant-numeric: tabular-nums;          /* números alineados */
}

/* Distribución de columnas (ajusta % si lo deseas) */
#dashDetailModal col.col-date   { width: 40%; }
#dashDetailModal col.col-hours  { width: 20%; }
#dashDetailModal col.col-ot     { width: 20%; }
#dashDetailModal col.col-status { width: 20%; }

#dashDetailModal th, #dashDetailModal td{ padding: 10px 8px; }
#dashDetailModal thead th{
  position: sticky; top: 0; z-index: 1;
  background: #f1f5f9; border-bottom: 1px solid #e5e7eb; text-align: left;
}
#dashDetailModal tbody tr{ border-bottom: 1px solid #f1f5f9; }
#dashDetailModal tbody tr:hover{ background: #f9fafb; }
#dashDetailModal tfoot th{ background: #f8fafc; border-top: 2px solid #e5e7eb; }
#dashDetailModal td.num, #dashDetailModal th.num{ text-align: right; }

/* Pills de estado (columna Status) */
#dashDetailModal .status{
  display:inline-block; font-weight: 600; font-size: 12px;
  padding: 3px 8px; border-radius: 999px; border: 1px solid transparent;
}
#dashDetailModal .status--approved{ background:#e6f4ea; color:#18794e; border-color:#c4e6d1; }
#dashDetailModal .status--pending{  background:#fff7e6; color:#9a6700; border-color:#f0d8a8; }
#dashDetailModal .status--rejected{ background:#fde8e8; color:#b42318; border-color:#f5c2c7; }

/* “This Week” clickeable: foco/hover accesible */
.period[role="button"]{
  outline: none; border-radius: 12px;
  transition: box-shadow .2s ease, background .2s ease;
}
.period[role="button"]:hover{ background:#f8fafc; box-shadow: inset 0 0 0 2px rgba(30,42,91,.12); }
.period[role="button"]:focus-visible{ outline: 2px solid var(--fc-orange); outline-offset: 2px; }

/* Responsive */
@media (max-width: 640px){
  #dashDetailModal .modal-content{ width: 97vw; }
  /* En pantallas pequeñas, da más aire a la fecha */
  #dashDetailModal col.col-date   { width: 35%; }
  #dashDetailModal col.col-hours  { width: 17%; }
  #dashDetailModal col.col-ot     { width: 26%; }
  #dashDetailModal col.col-status { width: 22%; }
}

:root{ --hub-card-h: 110px; }
    .hidden{ display:none !important; }
    .hub{ padding:18px; max-width:640px; margin:0 auto; }
    .hub__title{ font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing:.02em; color:#1E2A5B; margin: 0 0 14px; font-size: 18px; }
    .hub__grid{ display:grid; grid-template-columns: 1fr; gap:14px; }
    * Anula el media query que hacía 2 columnas */
    @media (min-width:560px){.hub__grid{ grid-template-columns: 1fr; } /* sigue 1 col */}
    .hub-card{
      display:flex;
      align-items:center;
      gap:14px;
      width:100%;
      min-height: var(--hub-card-h);   /* altura uniforme */
      border:1px solid rgba(30,42,91,.15);
      background:#fff;
      border-radius:16px;
      padding:16px 18px;
      cursor:pointer;
      transition: box-shadow .2s ease, transform .08s ease, border-color .2s ease;
    }
    .hub-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); border-color: rgba(30,42,91,.32); }
    .hub-card:active{ transform: translateY(1px); }
    .hub-card .material-icons{ font-size:32px; color: var(--fc-orange); }
    /* transición suave del color */
    .hub-card .material-icons{ transition: color .15s ease; }
    
    /* cambia el color del ícono al pasar sobre la tarjeta (o con tab) */
    .hub-card:hover .material-icons,
    .hub-card:hover .hub-card__desc,
    .hub-card:focus-visible .material-icons,
    .hub-card:focus-visible .hub-card__title,
    .hub-card:focus-visible .hub-card__desc{
      color:#fff;
    }
    .hub-card__txt{ flex:1; }
    .hub-card__title{ font-size: 1.3em; font-weight:700; color:#1E2A5B;text-align:left; }
    .hub-card__desc{ font-family: 'Michroma', sans-serif; font-size:13px; color:#4b5563; }
    .hub-note{font-family: 'Michroma', sans-serif;text-align:center; margin-top:8px; font-size:12px; color:#6b7280; }
    .hub-card[disabled]{ opacity:.5; pointer-events:none; }
    
    
    .dash{ padding:18px; }
    .dash__title{ font-family:'Michroma', sans-serif; text-transform:uppercase; letter-spacing:.02em; color:#1E2A5B; margin:0 0 14px; font-size:18px; }
    .kpi-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:14px; }
    .metric-card{ background:#fff; border:1px solid rgba(30,42,91,.15); border-radius:16px; padding:14px; min-height:142px; }
    .metric-card header{ display:flex; align-items:center; gap:10px; font-weight:700; color:#1E2A5B; padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid rgba(30,42,91,.12); }
    .metric-card header .material-icons{ color:var(--fc-orange); }
    .metric-card .periods{ display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; }
    .period{ background:#f8fafc; border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:10px; text-align:center; }
    .period .lab{ font-size:12px; color:#6b7280; letter-spacing:.06em; text-transform:uppercase; }
    .period .val{ font-size:20px; font-weight:700; color:#1E2A5B; }
    @media (max-width:420px){ .metric-card .periods{ grid-template-columns: 1fr; } }
    
    .dash__bar{
  display:flex; align-items:center; gap:12px;
  margin-bottom:10px;
  position: sticky; top: 0; z-index: 2;
  padding-top:6px; /* para que no pegue con el borde */
}

.btn-back{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight:600;
  border:1px solid rgba(30,42,91,.25);
  background:#fff; color:#1E2A5B;
  border-radius:12px; padding:8px 12px; cursor:pointer;
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease, transform .05s ease;
}
.btn-back .material-icons{ font-size:20px; }
.btn-back:hover{ background:#f8fafc; border-color: rgba(30,42,91,.4); box-shadow:0 2px 10px rgba(0,0,0,.06); }
.btn-back:active{ transform: translateY(1px); }
.btn-back:focus-visible{ outline:2px solid var(--fc-orange); outline-offset:2px; }

/* === PERIOD CLICKABLE — versión limpia (solo borde con blink) === */
.period.clickable{
  cursor:pointer;
  border:1px solid rgba(30,42,91,.25);  /* azul tenue */
  animation: lab-border-blink 4.8s ease-in-out infinite;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Hover/Focus: detén animación y resalta leve */
.period.clickable:hover,
.period.clickable:focus-visible{
  animation:none;
  border-color: rgba(255,79,0,.6);      /* naranja brand */
  box-shadow: 0 0 0 3px rgba(255,79,0,.12);
  outline:none;
}

/* Respeta reduced motion */
@media (prefers-reduced-motion: reduce){
  .period.clickable{ animation:none; }
}

/* Parpadeo sutil del borde */
@keyframes lab-border-blink{
  /* estado normal */
  0%, 88%, 100% {
    border-color: rgba(30,42,91,.25);         /* azul tenue */
    box-shadow: 0 0 0 0 rgba(255,79,0,0);      /* sin anillo */
  }
  /* flash naranja + “más grueso” sin cambiar border-width */
  95% {
    border-color: rgba(255,79,0,.65);
    box-shadow: 0 0 0 2px rgba(255,79,0,.28) inset;  /* anillo sutil */
  }
}
/* mini KPIs de resumen */
.mini-kpi{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:10px 12px;
  display:grid; gap:4px;
}
.mini-kpi .lab{ font-size:12px; color:#64748b; }
.mini-kpi .val{ font-weight:700; font-size:16px; color:#111827; }

/* “Payrolls History” card se verá flotando porque el host ya lo dejamos transparente */