/* ============================================================================
   LUZOPET UI — Skill de diseño (botones, formularios, menús)
   ============================================================================
   ...uso de botones (ver abajo)...

   FORMULARIOS — convenciones:
   1. TODO campo de texto lleva placeholder con un EJEMPLO real:
      <input type="text" name="nombre" placeholder="Ej: Peluquería">
      (estilo ::placeholder ya definido acá: gris #9EA1B5)
   2. Checkboxes/radios de elección → tarjetas .lp-option-card (como las
      tarjetas de modo de agenda de Servicios):
      <label class="lp-option-card">
          <input type="checkbox" name="roles[]" value="1">
          <i class="fas fa-user-md"></i>
          <span><strong>Veterinario</strong><small>Atiende turnos e historias</small></span>
      </label>
      El resaltado funciona con :has(input:checked) — no requiere JS.
   3. Checkbox on/off simple (Activo/Inactivo) → switch:
      <label class="lp-switch-row">
          <input type="checkbox" class="form-check-input m-0" name="activo">
          Servicio activo
      </label>

   TEMAS — variantes de color del sistema (elección por tenant en
   Administración → Configuración, guardada en settings y aplicada como
   <body data-tema="...">). Siempre usar var(--accent)/var(--accent-soft)
   en CSS nuevo; NO hardcodear violetas. Variantes: violeta (default),
   indigo, turquesa, coral.

   BOTONES:
     <button class="lp-btn lp-primary">Guardar</button>        acción principal
     <button class="lp-btn lp-danger">Eliminar</button>        acción destructiva
     <button class="lp-btn lp-success">Asignar</button>        acción positiva
     <button class="lp-btn lp-ghost">Hoy</button>              secundaria / filtros
     <button class="lp-btn lp-ghost-danger">Salir</button>     secundaria de riesgo
     <button class="lp-btn lp-ghost lp-icon"><i class="fas fa-arrows-alt"></i></button>
     <button class="lp-btn lp-primary lp-sm">Guardar</button>  tamaño compacto

   Menús desplegables:
     <ul class="dropdown-menu dropdown-menu-end lp-menu">
       <li><button class="lp-item lp-item-success">Liberar espacio</button></li>
       <li><button class="lp-item lp-item-danger">Cancelar turno</button></li>
     </ul>
   ========================================================================== */

/* --- Formularios: campos modernos ---------------------------------------- */
.form-card input::placeholder,
.form-card textarea::placeholder {
    color: #9EA1B5;
    opacity: 1;
}

.form-card input:not([type="checkbox"]):not([type="radio"]),
.form-card textarea,
.form-card select {
    border-radius: 10px;
}

/* --- Tarjetas de selección (checkbox/radio estilo Servicios) ------------- */
.lp-option-card {
    flex: 1 1 200px; display: flex; align-items: flex-start; gap: 12px;
    border: 1.5px solid var(--border, #E7E8EF); border-radius: 12px;
    padding: 13px 15px; cursor: pointer; background: #fff;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
    position: relative;
}
.lp-option-card input { position: absolute; opacity: 0; pointer-events: none; }
.lp-option-card i {
    font-size: 1.05rem; color: #9EA1B5; margin-top: 2px;
    transition: color .15s;
}
.lp-option-card strong { display: block; font-size: .9rem; color: var(--text-primary, #1F2130); }
.lp-option-card small { display: block; color: #9EA1B5; font-size: .78rem; margin-top: 2px; }
.lp-option-card:has(input:checked) {
    border-color: #6D5EF7; background: #F7F6FF;
    box-shadow: 0 0 0 3px rgba(109, 94, 247, .12);
}
.lp-option-card:has(input:checked) i { color: #6D5EF7; }
.lp-option-grid { display: flex; gap: 10px; flex-wrap: wrap; }

/* Variante en grilla pareja: todas las tarjetas del mismo ancho, sin que la
   última fila se estire (usada en los roles de usuarios). */
.lp-option-grid.lp-grid-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.lp-option-grid.lp-grid-roles .lp-option-card { flex: none; }

/* --- Switch on/off -------------------------------------------------------- */
.lp-switch-row {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 14px; border: 1px solid var(--border, #E7E8EF);
    border-radius: 12px; background: #fff; cursor: pointer; font-size: .9rem;
    color: var(--text-primary, #1F2130);
}
.lp-switch-row .form-check-input { cursor: pointer; }


/* --- TEMAS: variantes de color (body data-tema) --------------------------- */
/* El default (violeta) son los :root de cards.css. Cada tema sobreescribe
   las variables de acento y agrega su tinte de fondo. */
body[data-tema="indigo"] {
    --accent: #4F46E5;
    --accent-hover: #4338CA;
    --accent-soft: #EEF2FF;
    --ring-focus: 0 0 0 3px rgba(79, 70, 229, .15);
    --fondo-app: #F5F5FC;
}
body[data-tema="turquesa"] {
    --accent: #0D9488;
    --accent-hover: #0F766E;
    --accent-soft: #CCFBF1;
    --ring-focus: 0 0 0 3px rgba(13, 148, 136, .15);
    --fondo-app: #F2FAF8;
}
body[data-tema="coral"] {
    --accent: #E85D75;
    --accent-hover: #D14A61;
    --accent-soft: #FDEEF2;
    --ring-focus: 0 0 0 3px rgba(232, 93, 117, .15);
    --fondo-app: #FDF6F7;
}

/* Puntos violeta fijos del header y sidebar del admin, migrados a variables */
.lp-link.active { color: var(--accent) !important; background: var(--accent-soft) !important; }
.lp-brand svg path, .pub-brand svg path { stroke: var(--accent, #6D5EF7); }

/* --- MODO OSCURO -----------------------------------------------------------
   <body data-modo="oscuro">: invierte superficies y textos cubriendo las
   variables base y las superficies más usadas (tarjetas, sidebars, nav,
   inputs, tablas, modales). Los estilos nuevos deben apoyarse en
   var(--tarjeta)/var(--text-primary) para heredarlo automáticamente. */
body[data-modo="oscuro"] {
    --fondo-app: #14141B;
    --tarjeta: #1E1E28;
    --tarjeta-2: #262633;
    --border: #2E2E3C;
    --text-primary: #ECECF2;
    --text-secondary: #A0A3B8;
    --text-muted: #6E7185;
    --surface-1: #262633;
    color-scheme: dark;
    background-color: var(--fondo-app);
    color: var(--text-primary);
}

body[data-modo="oscuro"] body,
body[data-modo="oscuro"] .lp-nav,
body[data-modo="oscuro"] .pub-nav,
body[data-modo="oscuro"] .pub-footer,
body[data-modo="oscuro"] .admin-sidebar,
body[data-modo="oscuro"] .list-card,
body[data-modo="oscuro"] .form-card,
body[data-modo="oscuro"] .fb-card,
body[data-modo="oscuro"] .fb-view,
body[data-modo="oscuro"] .ci-card,
body[data-modo="oscuro"] .conf-card,
body[data-modo="oscuro"] .caja-form,
body[data-modo="oscuro"] .inst-form,
body[data-modo="oscuro"] .inst-logo-box,
body[data-modo="oscuro"] .reg-card,
body[data-modo="oscuro"] .card,
body[data-modo="oscuro"] .modal-content,
body[data-modo="oscuro"] .cfg-buscador-card,
body[data-modo="oscuro"] .cfg-panel,
body[data-modo="oscuro"] .fb-pagos-resumen,
body[data-modo="oscuro"] .lp-picker-resultados,
body[data-modo="oscuro"] .lp-option-card,
body[data-modo="oscuro"] .lp-switch-row,
body[data-modo="oscuro"] .lp-menu,
body[data-modo="oscuro"] .lp-ghost,
body[data-modo="oscuro"] .lp-picker-resultados .lp-item {
    background-color: var(--tarjeta);
    color: var(--text-primary);
}
body[data-modo="oscuro"] .lp-ghost,
body[data-modo="oscuro"] .lp-option-card,
body[data-modo="oscuro"] .lp-switch-row,
body[data-modo="oscuro"] .lp-picker-resultados,
body[data-modo="oscuro"] .cfg-search input,
body[data-modo="oscuro"] .lp-picker-search input,
body[data-modo="oscuro"] .form-card input,
body[data-modo="oscuro"] .form-card select,
body[data-modo="oscuro"] .form-card textarea,
body[data-modo="oscuro"] .fb-campo input,
body[data-modo="oscuro"] .fb-campo select,
body[data-modo="oscuro"] .fb-campo textarea,
body[data-modo="oscuro"] .fb-linea input,
body[data-modo="oscuro"] .fb-pago select,
body[data-modo="oscuro"] .fb-pago input,
body[data-modo="oscuro"] .conf-card input,
body[data-modo="oscuro"] .caja-form input,
body[data-modo="oscuro"] .reg-campo input,
body[data-modo="oscuro"] .inst-campo input,
body[data-modo="oscuro"] .inst-campo textarea,
body[data-modo="oscuro"] .pub-form input,
body[data-modo="oscuro"] .pub-form textarea {
    background-color: var(--tarjeta-2, #262633);
    border-color: var(--border);
    color: var(--text-primary);
}
body[data-modo="oscuro"] .form-card input::placeholder,
body[data-modo="oscuro"] .fb-campo input::placeholder,
body[data-modo="oscuro"] .pub-form input::placeholder,
body[data-modo="oscuro"] .pub-form textarea::placeholder,
body[data-modo="oscuro"] .lp-picker-search input::placeholder { color: #6E7185; }

body[data-modo="oscuro"] .list-card-table thead { background: var(--tarjeta-2); }
body[data-modo="oscuro"] .list-card-table table,
body[data-modo="oscuro"] .list-card-table th,
body[data-modo="oscuro"] .list-card-table td { border-color: var(--border); }
body[data-modo="oscuro"] .list-card-table th { color: var(--text-muted); }
body[data-modo="oscuro"] .cell-subtitle,
body[data-modo="oscuro"] .cell-actions .lp-btn { color: var(--text-secondary); }
body[data-modo="oscuro"] .cell-subtitle { --text-secondary: #A0A3B8; }

body[data-modo="oscuro"] .lp-nav .lp-brand-name,
body[data-modo="oscuro"] .lp-links a.pub-link,
body[data-modo="oscuro"] .lp-nav .lp-link,
body[data-modo="oscuro"] .pub-nav .pub-brand { color: var(--text-primary); }
body[data-modo="oscuro"] .lp-nav { border-bottom-color: var(--border); }
body[data-modo="oscuro"] .admin-sidebar h5,
body[data-modo="oscuro"] .admin-sidebar h6,
body[data-modo="oscuro"] .admin-sidebar .nav-link { color: var(--text-primary); }
body[data-modo="oscuro"] .admin-sidebar .nav-link:hover { background: var(--tarjeta-2); }

body[data-modo="oscuro"] .modal-content { background: var(--tarjeta); color: var(--text-primary); }
body[data-modo="oscuro"] .content-wrapper { background-color: var(--fondo-app); }
body[data-modo="oscuro"] .content-wrapper h1,
body[data-modo="oscuro"] .content-wrapper h2,
body[data-modo="oscuro"] .content-wrapper h3 { color: var(--text-primary); }
body[data-modo="oscuro"] .alert-success { background: #12331F; border-color: #1E5C3A; color: #7FD8A8; }
body[data-modo="oscuro"] .alert-danger { background: #3A1A1E; border-color: #6B2A30; color: #F0A9B0; }
body[data-modo="oscuro"] .form-check-input { background-color: var(--tarjeta-2); border-color: var(--border); }
body[data-modo="oscuro"] .form-control { background-color: var(--tarjeta-2); border-color: var(--border); color: var(--text-primary); }
body[data-modo="oscuro"] .btn-close { filter: invert(1); }
body[data-modo="oscuro"] .form-select {
    background-color: var(--tarjeta-2, #262633);
    border-color: var(--border);
    color: var(--text-primary);
}
body[data-modo="oscuro"] .search-input input {
    background-color: var(--tarjeta-2, #262633);
    border-color: var(--border);
    color: var(--text-primary);
}
body[data-modo="oscuro"] .search-input .ti-search { color: var(--text-muted); }
body[data-modo="oscuro"] .filter-select,
body[data-modo="oscuro"] .filter-clear {
    background-color: var(--tarjeta-2, #262633);
    border-color: var(--border);
    color: var(--text-primary);
}
body[data-modo="oscuro"] .filter-clear { color: var(--accent); border: none; }

/* Menú del usuario (navbar) */
body[data-modo="oscuro"] .lp-dropdown {
    background: var(--tarjeta);
    border-color: var(--border);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
    padding: 8px;
}
body[data-modo="oscuro"] .lp-dd-head { border-bottom-color: var(--border); }
body[data-modo="oscuro"] .lp-dd-head .n { color: var(--text-primary); }
body[data-modo="oscuro"] .lp-dd-head .r { color: var(--text-muted); }
body[data-modo="oscuro"] .lp-dd-label { color: var(--text-muted); }
body[data-modo="oscuro"] .lp-dd-sep { background: var(--border); }
body[data-modo="oscuro"] .lp-dd-item { color: var(--text-primary); }
body[data-modo="oscuro"] .lp-dd-item i { color: var(--text-secondary); }
body[data-modo="oscuro"] .lp-dd-item:hover { background: var(--tarjeta-2); color: var(--text-primary); }
body[data-modo="oscuro"] .lp-dd-item:hover i { color: var(--accent); }
body[data-modo="oscuro"] .lp-dd-item.sede-activa { background: var(--accent-soft); color: var(--accent); }
body[data-modo="oscuro"] .lp-dd-item.sede-activa i { color: var(--accent); }
body[data-modo="oscuro"] .lp-user-name,
body[data-modo="oscuro"] .lp-user-inst { color: var(--text-primary); }
body[data-modo="oscuro"] .lp-user-inst { color: var(--text-muted); }

/* Tarjetas del dashboard de administración */
body[data-modo="oscuro"] .adm-card {
    background: var(--tarjeta);
    border-color: var(--border);
}
body[data-modo="oscuro"] .adm-card .adm-titulo { color: var(--text-primary); }
body[data-modo="oscuro"] .adm-card .adm-meta { color: var(--text-secondary); }
body[data-modo="oscuro"] .adm-card:hover { background: var(--tarjeta-2); }
body[data-modo="oscuro"] .adm-seccion { color: var(--text-muted); border-color: var(--border); }
body[data-modo="oscuro"] .list-card-header h1 { color: var(--text-primary); }
body[data-modo="oscuro"] .list-card-footer { background: var(--tarjeta); color: var(--text-secondary); }
body[data-modo="oscuro"] .list-card-footer { border-top: 1px solid var(--border); }
body[data-modo="oscuro"] .form-card-footer,
body[data-modo="oscuro"] .modal-footer,
body[data-modo="oscuro"] .list-card-header { background-color: var(--tarjeta); border-color: var(--border); }
body[data-modo="oscuro"] p,
body[data-modo="oscuro"] .adm-sub { color: var(--text-secondary); }

body[data-modo="oscuro"] .lp-btn.lp-ghost { background: var(--tarjeta-2); border-color: var(--border); color: var(--text-primary); }
body[data-modo="oscuro"] .lp-btn.lp-ghost:hover { background: #32323F; }
body[data-modo="oscuro"] .lp-chip { background: var(--accent-soft); color: var(--accent); }
body[data-modo="oscuro"] .lp-item { color: var(--text-primary); }
body[data-modo="oscuro"] .lp-item:hover { background: var(--tarjeta-2); }


.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill, 24px);
    font-weight: 600;
    font-size: .88rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
}

.lp-btn:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus, 0 0 0 3px rgba(109, 94, 247, .15));
}

.lp-btn:active { transform: translateY(1px); }

/* Variantes ---------------------------------------------------------------- */
.lp-primary {
    background: var(--accent, #6D5EF7);
    color: #fff;
}
.lp-primary:hover {
    background: var(--accent-hover, #5847D1);
    color: #fff;
    box-shadow: 0 6px 16px rgba(109, 94, 247, .35);
    transform: translateY(-1px);
}

.lp-danger {
    background: var(--danger, #D8483A);
    color: #fff;
}
.lp-danger:hover {
    background: #C2382B;
    color: #fff;
    box-shadow: 0 6px 16px rgba(216, 72, 58, .30);
    transform: translateY(-1px);
}

.lp-success {
    background: #22A06B;
    color: #fff;
}
.lp-success:hover {
    background: #1B8A5B;
    color: #fff;
    box-shadow: 0 6px 16px rgba(34, 160, 107, .30);
    transform: translateY(-1px);
}

.lp-ghost {
    background: #fff;
    border-color: var(--border, #E7E8EF);
    color: var(--text-secondary, #6B6E85);
}
.lp-ghost:hover {
    background: #F4F4F8;
    border-color: #D9DAE5;
    color: var(--text-primary, #1F2130);
}

.lp-ghost-danger {
    background: #fff;
    border-color: #F2C7C2;
    color: var(--danger, #D8483A);
}
.lp-ghost-danger:hover {
    background: #FDEEF0;
    border-color: var(--danger, #D8483A);
    color: #C2382B;
}

/* Tamaños ------------------------------------------------------------------ */
.lp-sm {
    height: 32px;
    padding: 0 14px;
    font-size: .82rem;
}

/* Botón de solo ícono ------------------------------------------------------ */
.lp-icon {
    width: 38px;
    padding: 0;
}
.lp-icon.lp-sm { width: 32px; }
.lp-icon.dropdown-toggle::after { display: none; }

/* Menús desplegables ------------------------------------------------------- */
.lp-menu {
    border: 1px solid var(--border, #E7E8EF);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(31, 33, 48, .10);
    padding: 6px;
    min-width: 180px;
}

.lp-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary, #1F2130);
    font-size: .86rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s, color .12s;
}

.lp-item-success:hover {
    background: #E8F7EF;
    color: #1B8A5B;
}

.lp-item-danger:hover {
    background: #FDEEF0;
    color: #C2382B;
}


/* Banner de contexto (filtro/fecha activa) en agendas */
.lp-contexto {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    background: var(--accent-soft, #EEEBFF); color: var(--accent, #6D5EF7);
    border-radius: 10px; padding: 7px 12px; margin-bottom: 12px;
    font-size: .8rem; font-weight: 600;
}
.lp-contexto i { font-size: .75rem; }
.lp-contexto .lp-sep { color: var(--accent, #6D5EF7); opacity: .5; }
.lp-contexto .lp-volver-hoy {
    color: var(--accent, #6D5EF7); font-weight: 700; text-decoration: underline;
    margin-left: 4px; font-size: .78rem;
}
.fecha-no-hoy { border-color: var(--accent, #6D5EF7) !important; box-shadow: 0 0 0 3px var(--accent-soft, #EEEBFF); }

/* Componentes de modales de mascotas (buscador/selección) */
.lag-titulo {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lag-icono {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--accent-soft, #EEEBFF);
    color: var(--accent, #6D5EF7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.lag-titulo .modal-title { font-size: 1.02rem; line-height: 1.25; }
.lag-subtitulo {
    font-size: .76rem;
    color: var(--text-muted, #9EA1B5);
    font-weight: 500;
    margin-top: 2px;
}
#llegadaAgModal .modal-body { padding: 8px 20px 6px; }
.lag-search {
    position: relative;
    margin-bottom: 10px;
}
.lag-search i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #9EA1B5);
    font-size: .95rem;
    pointer-events: none;
}
.lag-search input {
    width: 100%;
    height: 42px;
    border: 1.5px solid var(--border, #E8E8EF);
    border-radius: 11px;
    background: var(--tarjeta-2, #F7F7FA);
    padding: 0 14px 0 38px;
    font-size: .92rem;
    color: var(--text-primary, #202124);
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.lag-search input::placeholder { color: var(--text-muted, #9EA1B5); }
.lag-search input:focus {
    border-color: var(--accent, #6D5EF7);
    background: var(--tarjeta, #fff);
    box-shadow: 0 0 0 3px var(--accent-soft, #EEEBFF);
}
.lag-hint {
    font-size: .8rem;
    color: var(--text-muted, #9EA1B5);
    padding: 14px 4px 16px;
    text-align: center;
}
.lag-hint i { margin-right: 6px; }
#lag-results { max-height: 240px; overflow-y: auto; padding-bottom: 4px; }
.lag-motivo {
    width: 100%;
    height: 40px;
    border: 1.5px solid var(--border, #E8E8EF);
    border-radius: 11px;
    background: var(--tarjeta, #fff);
    padding: 0 14px;
    font-size: .88rem;
    color: var(--text-primary, #202124);
    outline: none;
    margin-top: 10px;
    transition: border-color .15s, box-shadow .15s;
}
.lag-motivo::placeholder { color: var(--text-muted, #9EA1B5); }
.lag-motivo:focus {
    border-color: var(--accent, #6D5EF7);
    box-shadow: 0 0 0 3px var(--accent-soft, #EEEBFF);

}
.lag-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    text-align: left;
    background: var(--tarjeta, #fff);
    border: 1.5px solid var(--border, #E8E8EF);
    border-radius: 11px;
    padding: 9px 12px;
    margin-bottom: 7px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.lag-item:hover { border-color: var(--accent, #6D5EF7); }
.lag-item.seleccionada {
    border-color: var(--accent, #6D5EF7);
    background: var(--accent-soft, #EEEBFF);
}
.lag-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent-soft, #EEEBFF);
    color: var(--accent, #6D5EF7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    flex-shrink: 0;
}
.lag-item.seleccionada .lag-avatar {
    background: var(--accent, #6D5EF7);
    color: #fff;
}
.lag-item strong { font-size: .9rem; color: var(--text-primary, #202124); }
.lag-item small { color: var(--text-muted, #9EA1B5); font-size: .74rem; }
.lag-item.seleccionada strong { color: var(--accent, #6D5EF7); }
.lag-check { margin-left: auto; color: var(--accent, #6D5EF7); font-size: .95rem; display: none; }
.lag-item.seleccionada .lag-check { display: inline-block; }
.lag-vacio {
    text-align: center;
    color: var(--text-muted, #9EA1B5);
    font-size: .82rem;
    padding: 16px 6px;
}
#llegadaAgModal .modal-footer {
    border-top: none;
    padding: 10px 20px 18px;
}
</style>