/* ============================================================================
   Orfeo — tema común de la familia de aplicaciones (mismo look & feel que OrfeoMédico)
   Estilo minimalista tipo Holded: barra superior blanca, tarjetas con borde fino, azul-grisáceo pastel
   como color principal, verde/ámbar/rojo suaves para estados y Poppins como tipografía.
   Se carga DESPUÉS de site.css y mobile.css, así que manda sobre los estilos antiguos.
   ============================================================================ */

:root {
    --primary: #7c8db5;
    --primary-dark: #6b7da5;
    --primary-light: #a8b5cf;
    --primary-bg: #f0f2f7;
    --secondary: #8b95a5;
    --success: #7ab89a;
    --success-bg: #eef6f1;
    --warning: #d4a96a;
    --warning-bg: #faf4ec;
    --danger: #c4867a;
    --danger-bg: #f8f0ee;
    --bg-main: #f7f8fa;
    --bg-card: #ffffff;
    --text-primary: #3a3f47;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --border: #e5e7eb;
    --border-light: #f0f1f3;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 14px;
    --transition: all 0.15s ease;
    --topnav-h: 56px;
    --m-bar: 60px;
    --m-safe-b: env(safe-area-inset-bottom, 0px);
    --m-safe-t: env(safe-area-inset-top, 0px);

    /* Variables antiguas (site.css): se redirigen al tema nuevo */
    --jor-green: #3a3f47;
    --jor-green-h: #2f343b;
    --jor-accent: var(--primary);
    --jor-accent-h: var(--primary-dark);
    --jor-accent-a08: rgba(124,141,181,.08);
    --jor-accent-a18: rgba(124,141,181,.18);
    --jor-topbar: #ffffff;
    --jor-dark: var(--text-primary);
    --jor-mid: var(--text-secondary);
    --jor-exit: var(--danger);
    --jor-exit-h: #b0746a;
    --font-jor: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Radzen */
    --rz-primary: var(--primary);
    --rz-primary-light: var(--primary-light);
    --rz-primary-lighter: var(--primary-bg);
    --rz-primary-dark: var(--primary-dark);
    --rz-primary-darker: #5b6c94;
    --rz-secondary: var(--secondary);
    --rz-success: var(--success);
    --rz-warning: var(--warning);
    --rz-danger: var(--danger);
    --rz-base-font-family: 'Poppins', sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-main);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}
a { color: var(--primary-dark); }
a:hover { color: var(--primary); }
h1, h2, h3, h4, h5, h6 { color: var(--text-primary); font-family: 'Poppins', sans-serif; }

/* ============================================
   BARRA SUPERIOR
   ============================================ */
.top-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: calc(var(--topnav-h) + var(--m-safe-t));
    padding: var(--m-safe-t) 24px 0;
    background: white;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    z-index: 1000;
}

.top-nav-brand {
    display: flex; align-items: center; gap: 8px;
    text-decoration: none; color: var(--text-primary) !important;
    font-weight: 600; font-size: 15px;
    margin-right: 36px; flex-shrink: 0;
}
.top-nav-brand i { color: var(--primary); font-size: 20px; }
.top-nav-brand img.top-nav-logo { height: 28px; max-width: 110px; object-fit: contain; border-radius: 5px; }

.top-nav-links { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }

.top-nav-links .nav-link,
.nav-group > .nav-link {
    color: var(--text-secondary);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 400;
    transition: var(--transition);
    text-decoration: none; white-space: nowrap;
    background: none; border: none; cursor: pointer; font-family: inherit;
}
.top-nav-links .nav-link:hover { color: var(--text-primary); background: var(--border-light); }
.top-nav-links .nav-link.active { color: var(--primary-dark); background: var(--primary-bg); font-weight: 500; }
.top-nav-links .nav-link i { font-size: 15px; }

.top-nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }

.top-nav-user { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); text-decoration: none !important; }
.top-nav-user .avatar {
    width: 32px; height: 32px; background: var(--primary-bg); color: var(--primary-dark);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600;
}
.top-nav-btn {
    color: var(--text-muted); border: 1px solid var(--border); background: white; border-radius: var(--radius-sm);
    font-size: 13px; padding: 6px 10px; line-height: 1; cursor: pointer; text-decoration: none !important;
    display: inline-flex; align-items: center; gap: 6px; transition: var(--transition);
}
.top-nav-btn:hover { color: var(--primary-dark); border-color: var(--primary-light); background: var(--primary-bg); }

/* Grupos desplegables */
.nav-group { position: relative; }
.nav-group-caret { font-size: 10px !important; transition: transform .2s ease; opacity: .6; }
.nav-group.open .nav-group-caret { transform: rotate(180deg); }
.nav-group-menu {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 235px;
    background: white; border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 6px; display: none; z-index: 1150;
}
.nav-group.open .nav-group-menu { display: block; }
.nav-group-menu .nav-link { width: 100%; border-radius: 8px; }
.nav-group-menu .nav-link:hover { background: var(--primary-bg); color: var(--primary-dark); }
.nav-group-overlay { position: fixed; inset: 0; z-index: 1140; background: transparent; }

@media (max-width: 1599px) and (min-width: 769px) {
    .top-nav-links { gap: 0; }
    .top-nav-links > .nav-link, .top-nav-links > .nav-group > .nav-link { padding: 8px 8px; gap: 5px; }
    .top-nav-links > .nav-group > .nav-link > .nav-group-caret { display: none; }
    .top-nav-right { gap: 8px; }
}
@media (max-width: 1199px) and (min-width: 769px) {
    .top-nav-links > .nav-link > span, .top-nav-links > .nav-group > .nav-link > span { display: none; }
    .top-nav-links > .nav-link, .top-nav-links > .nav-group > .nav-link { padding: 8px 11px; }
    .top-nav-links > .nav-link > i, .top-nav-links > .nav-group > .nav-link > i { font-size: 17px; }
}

/* ============================================
   ESTRUCTURA (se conserva la de las páginas existentes)
   ============================================ */
.jor-app-shell {
    display: flex; flex-direction: column; width: 100%;
    height: 100vh; height: 100dvh;
    padding-top: calc(var(--topnav-h) + var(--m-safe-t));
    overflow: hidden; background: var(--bg-main);
}
.jor-shell-body { flex: 1; width: 100%; display: flex; overflow: hidden; min-height: 0; }
.jor-main-content { flex: 1; width: 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--bg-main); }
.jor-page-wrapper { flex: 1; width: 100%; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 24px 28px; box-sizing: border-box; }

/* Antiguo menú lateral y barra verde: ya no se usan */
.jor-topbar, .jor-sidebar, .jor-sidebar-overlay, .m-bottomnav { display: none !important; }

/* Aviso de error de Blazor */
#blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); box-sizing: border-box; display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 2000; }

/* ============================================
   TARJETAS
   ============================================ */
.card, .rz-card {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-xs) !important;
    background: white !important;
    overflow: hidden;
}
.card-header { background: white; border-bottom: 1px solid var(--border-light); padding: 14px 18px; font-weight: 600; font-size: 13px; }
.card-body { padding: 18px; }
.border-primary { border-left: 3px solid var(--primary) !important; }
.border-warning { border-left: 3px solid var(--warning) !important; }
.border-success { border-left: 3px solid var(--success) !important; }
.border-info { border-left: 3px solid var(--secondary) !important; }

/* ============================================
   TABLAS
   ============================================ */
.table { border-radius: var(--radius); font-size: 13px; margin-bottom: 0; color: var(--text-secondary); }
.table thead th {
    background: #f9fafb; border: none !important; border-bottom: 1px solid var(--border) !important;
    padding: 10px 14px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted);
}
.table td { padding: 10px 14px; vertical-align: middle; border-color: var(--border-light) !important; color: var(--text-secondary); }
.table-hover tbody tr:hover, .table-striped tbody tr:nth-of-type(odd):hover { background-color: #fafbfc; }
.table-striped tbody tr:nth-of-type(odd) { background-color: #fcfcfd; }

/* ============================================
   BADGES
   ============================================ */
.badge { font-weight: 500; padding: 3px 8px; border-radius: 4px; font-size: 11px; }
.badge-success, .bg-success { background: var(--success-bg) !important; color: #4f8a6c !important; }
.badge-warning, .bg-warning { background: var(--warning-bg) !important; color: #a87c3a !important; }
.badge-danger, .bg-danger { background: var(--danger-bg) !important; color: #a8645a !important; }
.badge-primary, .badge-info, .bg-primary { background: var(--primary-bg) !important; color: var(--primary-dark) !important; }
.badge-secondary { background: var(--border-light) !important; color: var(--text-secondary) !important; }

/* ============================================
   BOTONES (Bootstrap 4 → paleta del tema)
   ============================================ */
.btn { border-radius: var(--radius-sm); font-weight: 500; font-size: 13px; padding: 7px 14px; transition: var(--transition); font-family: 'Poppins', sans-serif; }
.btn-primary, .btn-success { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover, .btn-success:hover, .btn-primary:focus, .btn-success:focus,
.btn-primary:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled):active { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn-primary:disabled, .btn-success:disabled { background: var(--primary-light); border-color: var(--primary-light); }
.btn-outline-primary, .btn-outline-success, .btn-outline-secondary, .btn-light {
    color: var(--text-secondary); border-color: var(--border); background: white;
}
.btn-outline-primary:hover, .btn-outline-success:hover, .btn-outline-secondary:hover, .btn-light:hover {
    background: var(--primary-bg); border-color: var(--primary-light); color: var(--primary-dark);
}
.btn-outline-primary { color: var(--primary-dark); }
.btn-warning { background: var(--warning); border-color: var(--warning); color: #fff; }
.btn-warning:hover { background: #c39858; border-color: #c39858; color: #fff; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #b0746a; border-color: #b0746a; color: #fff; }
.btn-outline-danger { color: var(--danger); border-color: var(--border); background: white; }
.btn-outline-danger:hover { background: var(--danger-bg); border-color: var(--danger); color: #a8645a; }
.btn:focus, .btn:active:focus { box-shadow: 0 0 0 3px rgba(124,141,181,.2) !important; }

/* Radzen */
.rz-button.rz-primary, .rz-button.rz-variant-filled.rz-primary { background-color: var(--primary) !important; border-color: var(--primary) !important; }
.rz-button.rz-success { background-color: var(--success) !important; }
.rz-button.rz-danger { background-color: var(--danger) !important; }
.rz-button.rz-warning { background-color: var(--warning) !important; }

/* ============================================
   FORMULARIOS
   ============================================ */
.form-control, .form-select, .custom-select {
    border-radius: var(--radius-sm); border: 1px solid var(--border); padding: 9px 12px;
    font-size: 13px; transition: var(--transition); font-family: 'Poppins', sans-serif; color: var(--text-primary);
}
.form-control:focus, .form-select:focus, .custom-select:focus { border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(124,141,181,.15); }
.form-label, label { font-weight: 500; font-size: 12px; color: var(--text-secondary); }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); }

/* ============================================
   MODALES, AVISOS, PESTAÑAS
   ============================================ */
.modal-content { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 20px 50px rgba(0,0,0,.1); }
.modal-header { border-bottom: 1px solid var(--border-light); padding: 18px 22px; }
.modal-body { padding: 22px; }
.modal-footer { border-top: 1px solid var(--border-light); padding: 14px 22px; }
.alert { border-radius: var(--radius-sm); border: none; font-size: 13px; }
.alert-success { background: var(--success-bg); color: #4d6b5b; border-left: 3px solid var(--success); }
.alert-warning { background: var(--warning-bg); color: #6f5732; border-left: 3px solid var(--warning); }
.alert-danger { background: var(--danger-bg); color: #8a4f46; border-left: 3px solid var(--danger); }
.alert-info { background: var(--primary-bg); color: #4b5a80; border-left: 3px solid var(--primary); }
.nav-tabs { border-bottom: 1px solid var(--border); }
.nav-tabs .nav-link { border-radius: var(--radius-sm) var(--radius-sm) 0 0; font-weight: 500; color: var(--text-muted); border: none; padding: 10px 18px; font-size: 13px; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link.active { color: var(--primary-dark); border-bottom-color: var(--primary); background: transparent; }
.nav-tabs .nav-link:hover { color: var(--text-primary); border-color: transparent; background: transparent; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ============================================
   CABECERAS DE PÁGINA + AYUDA CONTEXTUAL «?»
   ============================================ */
.page-title { font-size: 20px; font-weight: 600; color: var(--text-primary); margin: 0 0 4px; }
.page-sub { color: var(--text-secondary); font-size: 13px; margin: 0 0 16px; }
.ayuda-contextual {
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    margin-left: 6px; font-size: 15px; color: var(--text-muted); text-decoration: none; line-height: 1;
}
.ayuda-contextual:hover { color: var(--primary); }

/* ============================================
   NAVEGACIÓN INFERIOR (móvil)
   ============================================ */
.bottom-nav {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    height: calc(var(--m-bar) + var(--m-safe-b)); padding: 0 4px var(--m-safe-b);
    background: white; border-top: 1px solid var(--border); z-index: 1000;
}
.bottom-nav-items { display: flex; align-items: center; justify-content: space-around; height: 100%; }
.bottom-nav-item {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    text-decoration: none !important; color: var(--text-muted); font-size: 9.5px; font-weight: 500; letter-spacing: -.2px;
    padding: 4px 0; border-radius: var(--radius-sm); transition: var(--transition);
    background: none; border: none; cursor: pointer; font-family: inherit; touch-action: manipulation;
}
.bottom-nav-item i { font-size: 18px; position: relative; }
.bottom-nav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom-nav-item.active { color: var(--primary-dark); }
.bottom-nav-item:active { background: var(--primary-bg); }
.bottom-nav-badge { position: absolute; top: -5px; right: -9px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 9px; line-height: 15px; text-align: center; font-weight: 600; font-style: normal; }
.bottom-nav-group { position: relative; display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
.bottom-nav-group > .bottom-nav-item { width: 100%; }

.jornada-popover {
    position: fixed; left: 8px; right: 8px; bottom: calc(var(--m-bar) + var(--m-safe-b) + 8px);
    max-height: 70vh; max-height: 70dvh; overflow-y: auto;
    background: white; border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0,0,0,.16); padding: 6px; z-index: 1150; animation: navPop .15s ease;
}
@keyframes navPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.jornada-popover-titulo { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: 10px 12px 4px; }
.jornada-popover-item {
    display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; width: 100%;
    text-decoration: none !important; color: var(--text-primary); font-size: 14px; font-weight: 500; transition: var(--transition);
    background: none; border: none; text-align: left; font-family: inherit;
}
.jornada-popover-item:hover, .jornada-popover-item:active { background: var(--primary-bg); color: var(--primary-dark); }
.jornada-popover-item i { font-size: 16px; color: var(--primary); width: 20px; text-align: center; }
.jornada-popover-item.salir, .jornada-popover-item.salir i { color: var(--danger); }
.jornada-popover-overlay { position: fixed; inset: 0; z-index: 1140; background: rgba(58,63,71,.25); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .bottom-nav { display: block; }
    .top-nav { padding: var(--m-safe-t) 12px 0; }
    .top-nav-links { display: none; }
    .top-nav-brand { margin-right: 0; }
    .top-nav-user .nombre { display: none; }
    .jor-page-wrapper { padding: 12px 12px calc(var(--m-bar) + var(--m-safe-b) + 16px); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    .jor-app-shell.m-sin-barra .jor-page-wrapper { padding-bottom: calc(var(--m-safe-b) + 16px); }
    .modal-dialog { margin: 8px; max-width: calc(100vw - 16px); }
    .modal-body { padding: 16px !important; }
    .page-title { font-size: 18px; }
}

@media (max-width: 360px) {
    .bottom-nav { padding: 0 2px var(--m-safe-b); }
    .bottom-nav-item { font-size: 8.5px; }
    .bottom-nav-item i { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ============================================
   UTILIDADES (Bootstrap 5 → 4): las usa el centro de ayuda
   ============================================ */
.me-1 { margin-right: .25rem; } .me-2 { margin-right: .5rem; }
.ms-1 { margin-left: .25rem; } .ms-2 { margin-left: .5rem; } .ms-auto { margin-left: auto; }

/* Pestañas de configuración */
.conf-tabs { border-bottom: 1px solid var(--border) !important; }
.conf-tab { font-family: 'Poppins', sans-serif; }
.conf-tab:hover { background: var(--primary-bg) !important; color: var(--primary-dark) !important; }
.conf-tab.active { color: var(--primary-dark) !important; border-bottom-color: var(--primary) !important; }

/* ============================================
   BOTONES CIRCULARES (fichajes): el padding y el radio genéricos de .btn los descentraban
   ============================================ */
.btn.btn-circle {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border-radius: 50%; line-height: 1;
}
.btn.btn-circle.btn-sm { width: 32px; height: 32px; font-size: 12px; }
.btn.btn-circle.btn-xl { width: 70px; height: 70px; font-size: 24px; }
.btn.btn-circle > span, .btn.btn-circle > i { display: block; margin: 0; line-height: 1; }
/* Icono de cada fichaje: columna estrecha y centrada */
.pic-fichajes td:first-child { width: 64px; text-align: center; padding-left: 8px; padding-right: 8px; }

/* ============================================
   TABLAS DE DATOS (Radzen): filas compactas y celda de empleado
   ============================================ */
.rz-data-grid .rz-datatable-data td, .rz-data-grid td.rz-cell-data, .rz-data-grid .rz-data-row > td { padding-top: 7px !important; padding-bottom: 7px !important; }
.rz-data-grid .rz-datatable-data td .rz-cell-data { padding: 0; }
.emp-celda { display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 0; }
.emp-avatar { width: 34px !important; height: 34px !important; border-radius: 50% !important; object-fit: cover; flex-shrink: 0; }
.emp-nombre { font-size: 13px; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-celda:hover .emp-nombre { color: var(--primary-dark); }

/* Fila seleccionada en las tablas de datos: tono suave en lugar del azul intenso de Radzen */
.rz-data-grid .rz-state-highlight, .rz-data-grid tr.rz-state-highlight > td, .rz-data-grid .rz-data-row.rz-state-highlight > td {
    background-color: var(--primary-bg) !important; color: var(--text-primary) !important;
}

/* ============================================
   PANTALLA DE FICHAJE DEL PANEL (kiosco)
   ============================================ */
.kiosko { max-width: 920px; margin: 0 auto; min-height: calc(100vh - var(--topnav-h) - 80px); min-height: calc(100dvh - var(--topnav-h) - 80px); display: flex; flex-direction: column; gap: 18px; position: relative; padding: 4px 0 16px; }
.kiosko-cab { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.kiosko-quien { display: flex; align-items: center; gap: 16px; min-width: 0; }
.kiosko-avatar { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); background: #fff; }
.kiosko-hola { font-size: 26px; font-weight: 600; line-height: 1.2; color: var(--text-primary); }
.kiosko-fecha { font-size: 14px; color: var(--text-muted); margin-top: 2px; }
.kiosko-reloj { font-size: 44px; font-weight: 300; letter-spacing: .02em; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1; }

.kiosko-estado { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 20px; font-size: 17px; color: var(--text-secondary); }
.kiosko-punto { width: 11px; height: 11px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.kiosko-estado.trabajando .kiosko-punto { background: var(--success); box-shadow: 0 0 0 4px rgba(122,184,154,.25); }
.kiosko-estado.pausa .kiosko-punto { background: var(--warning); box-shadow: 0 0 0 4px rgba(212,169,106,.25); }
.kiosko-estado-texto { font-weight: 500; color: var(--text-primary); }
.kiosko-tiempo { margin-left: auto; font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.kiosko-aviso { background: var(--primary-bg); color: var(--primary-dark); border-radius: var(--radius); padding: 10px 14px; font-size: 13.5px; }

.kiosko-acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.kiosko-acciones.una { grid-template-columns: 1fr; }
.kiosko-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 150px; padding: 18px 12px; background: #fff; border: 1px solid var(--border); border-radius: 18px; cursor: pointer; transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease; font-family: inherit; touch-action: manipulation; }
.kiosko-tile:hover { box-shadow: 0 8px 22px rgba(58,63,71,.09); border-color: var(--primary-light); }
.kiosko-tile:active { transform: scale(.98); }
.kiosko-icono { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 30px; background: var(--primary-bg); color: var(--primary-dark); }
.kiosko-etiqueta { font-size: 19px; font-weight: 500; color: var(--text-primary); }
.kiosko-tile.pausa .kiosko-icono { background: var(--warning-bg); color: #a87c3a; }
.kiosko-tile.fin .kiosko-icono { background: var(--danger-bg); color: #a8645a; }
.kiosko-tile.principal { min-height: 190px; background: var(--primary); border-color: var(--primary); }
.kiosko-tile.principal:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.kiosko-tile.principal .kiosko-icono { background: rgba(255,255,255,.2); color: #fff; width: 76px; height: 76px; font-size: 38px; }
.kiosko-tile.principal .kiosko-etiqueta { color: #fff; font-size: 24px; }

.kiosko-ultimos { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 18px; }
.kiosko-ultimos-titulo { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.kiosko-fila { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border-light); font-size: 14px; }
.kiosko-fila:first-of-type { border-top: 0; }
.kiosko-fila-icono { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; background: var(--primary-bg); color: var(--primary-dark); flex-shrink: 0; }
.kiosko-fila-icono.t2 { background: var(--warning-bg); color: #a87c3a; }
.kiosko-fila-icono.t4 { background: var(--danger-bg); color: #a8645a; }
.kiosko-fila-texto { flex: 1; color: var(--text-primary); }
.kiosko-fila-hora { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.kiosko-pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 6px; }
.kiosko-salir { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 18px; font-size: 14px; color: var(--text-secondary); cursor: pointer; font-family: inherit; }
.kiosko-salir:hover { background: var(--primary-bg); color: var(--primary-dark); border-color: var(--primary-light); }
.kiosko-nota { font-size: 12px; color: var(--text-muted); }

.kiosko-capa { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; background: rgba(58,63,71,.45); padding: 20px; animation: kioskoFade .2s ease; }
.kiosko-capa.ok { background: rgba(247,248,250,.97); }
@keyframes kioskoFade { from { opacity: 0; } to { opacity: 1; } }
.kiosko-capa-caja { background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 38px 46px; text-align: center; box-shadow: 0 20px 60px rgba(58,63,71,.18); max-width: 440px; width: 100%; }
.kiosko-capa-icono { font-size: 64px; line-height: 1; }
.kiosko-capa.ok .kiosko-capa-icono { color: var(--success); }
.kiosko-capa.aviso .kiosko-capa-icono { color: var(--warning); }
.kiosko-capa-titulo { font-size: 26px; font-weight: 600; margin-top: 10px; color: var(--text-primary); }
.kiosko-capa-sub { font-size: 15px; color: var(--text-secondary); margin-top: 6px; }
.kiosko-seguir { margin-top: 22px; background: var(--primary); color: #fff; border: 0; border-radius: 12px; padding: 14px 34px; font-size: 17px; font-weight: 500; cursor: pointer; font-family: inherit; }
.kiosko-seguir:hover { background: var(--primary-dark); }

@media (max-width: 600px) {
    .kiosko-hola { font-size: 21px; } .kiosko-reloj { font-size: 32px; } .kiosko-avatar { width: 54px; height: 54px; }
    .kiosko-acciones { grid-template-columns: 1fr 1fr; }
    .kiosko-tile { min-height: 120px; } .kiosko-tile.principal { min-height: 150px; }
    .kiosko-capa-caja { padding: 28px 22px; }
}

/* Botones circulares de fichaje: la etiqueta solo se ve donde se pide (la pantalla del empleado en móvil) */
.btn.btn-circle > span.pic-et { display: none; }

/* Selector de archivos (InputFile y input type=file): altura propia y botón con el estilo de la aplicación, sin recortes */
input[type="file"].form-control,
input[type="file"].form-control-sm {
    height: auto;
    min-height: 38px;
    padding: 5px 8px;
    line-height: 1.5;
    font-size: 13.5px;
    color: #4b5563;
    background: #fff;
    border: 1px solid #d9deeb;
    border-radius: 8px;
    cursor: pointer;
}
input[type="file"].form-control::file-selector-button,
input[type="file"].form-control-sm::file-selector-button {
    margin: 0 12px 0 0;
    padding: 6px 14px;
    border: 1px solid var(--primary, #7c8db5);
    border-radius: 7px;
    background: var(--primary, #7c8db5);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: filter .15s;
}
input[type="file"].form-control::file-selector-button:hover { filter: brightness(.94); }
input[type="file"].form-control:disabled { opacity: .6; cursor: not-allowed; }

/* Listas numeradas de instrucciones dentro de tarjetas */
.card ol { list-style: decimal; }
.card ol > li { list-style: decimal; }

/* Desplegables: altura propia para que el texto no se recorte con la tipografía de la aplicación */
select.form-control,
select.form-control-sm,
select.custom-select {
    height: auto;
    min-height: 34px;
    padding: 6px 30px 6px 10px;
    line-height: 1.4;
    font-size: 13.5px;
    color: #374151;
    background-color: #fff;
    border: 1px solid #d9deeb;
    border-radius: 8px;
    cursor: pointer;
}
select.form-control:focus, select.form-control-sm:focus { border-color: var(--primary, #7c8db5); box-shadow: 0 0 0 3px rgba(124,141,181,.18); outline: 0; }
select.form-control:disabled { opacity: .6; cursor: not-allowed; }