/* Módulo 07 · Horarios · aspecto Hierbicas (sobre base, theme y app.css).
   Los elementos los genera app.js/management.js sin clases propias, por eso
   se estilan por estructura dentro de .hours-module. */
.hours-module .screen-header { gap: 10px; }
.hours-module #business { margin-top: -6px; }
.hours-actions { align-items: center; margin-bottom: 18px; }
.hours-actions > * { flex: 0 1 auto; }

.hours-module #message {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--info-bg);
    margin-bottom: 16px;
}
.hours-module #message:empty { display: none; }
.hours-module #message.error { background: var(--error-bg); color: var(--error-text); border-color: #e6c2b8; }

/* Consulta: filas día / horario, como el diseño aprobado */
.hours-module .day {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.hours-module .day:last-child { border-bottom: 0; }
.hours-module .day strong { font-weight: 400; min-width: 120px; }
.hours-module .day.today strong, .hours-module .day.today span { font-weight: 700; }
.hours-module #week > p, .hours-module .exception { padding: 8px 0; }
.hours-module #week > p:first-child:not(:only-child) {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--info-bg);
    margin-bottom: 8px;
}

/* Botones generados por el módulo (Añadir tramo, Eliminar, permisos…) */
.hours-module #week-editor button,
.hours-module #exception-editor button,
.hours-module #staff button,
.hours-module #audit button {
    min-height: 38px;
    padding: 6px 12px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
    background-color: var(--button-bg);
    background-image: var(--wood-image);
    border: 1px solid var(--button-border);
    border-radius: 7px;
    cursor: pointer;
}

/* Editor */
.hours-module fieldset {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    margin: 0 0 12px;
    background: #ffffff;
}
.hours-module legend { font-weight: 700; padding: 0 6px; }
.hours-module .period { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.hours-module .period label, .hours-module fieldset > label { display: inline-flex; gap: 6px; align-items: center; }
.hours-module input, .hours-module select, .hours-module textarea {
    font: inherit;
    font-size: 16px;
    padding: 8px 10px;
    color: var(--color-text);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #ffffff;
}
.hours-module .period input { width: 90px; }
.hours-module textarea { width: 100%; min-height: 90px; }
.copy-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 12px; }

/* Gestión (propietaria): permisos e historial */
.hours-module .staff-row, .hours-module .audit-entry {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    margin: 10px 0;
    overflow-wrap: anywhere;
}
.hours-module .audit-entry h3 { font-size: 1rem; }
.hours-module .audit-entry p { margin: 4px 0; }
.hours-module details { margin: 8px 0; }
.hours-module summary { cursor: pointer; font-weight: 700; }

@media (max-width: 480px) {
    .hours-module .day { flex-direction: column; gap: 2px; }
}

/* Hierbicas: flecha como en el resto de pantallas y tramos en rejilla. */
.hours-module #back::before { content: "← "; }
.hours-module .period {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    align-items: end;
}
.hours-module .period label { display: grid; gap: 2px; font-size: 0.9rem; }
.hours-module .period input { width: 100%; }
.hours-module .audit-entry strong { display: inline-block; margin-right: 8px; }