/* Estilos encapsulados al módulo Office (sin tocar el fondo global) */
.office-module * { box-sizing: border-box; }
.office-module { color: #111; }
.office-card { max-width: 1100px; margin: 24px auto; background: #fff; border: 1px solid #e3e6ea; border-radius: 10px; overflow: hidden; }
.office-card .card-header { padding: 14px 18px; border-bottom: 1px solid #e9ecef; background: #fafbfc; }
.office-card .subtitle { color: #6b7280; margin: 6px 0 0 0; font-size: 14px; }
.office-module .tabs-nav { display: flex; gap: 8px; padding: 8px; border-bottom: 1px solid #e9ecef; background: #f7f7f8; flex-wrap: wrap; }
.office-module .tab-link { background: #ffffff; color: #374151; border: 1px solid #e5e7eb; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.office-module .tab-link.active { color: #111827; background: #eef2ff; border-color: #c7d2fe; }
.office-module .tabs-body { padding: 14px; background: #fff; }
.office-module .tab-pane { display: none; }
.office-module .tab-pane.active { display: block; }
.office-module .editor-toolbar { display: flex; gap: 8px; margin-bottom: 10px; }
.office-module .editor-toolbar button { background: #ffffff; color: #111; border: 1px solid #e5e7eb; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.office-module .editor-area { min-height: 260px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: #ffffff; }
.office-module .note { color: #6b7280; margin-top: 10px; font-size: 13px; }
.office-module .sheet-toolbar { display: flex; gap: 8px; margin-bottom: 10px; }
.office-module .sheet-toolbar button { background: #ffffff; color: #111; border: 1px solid #e5e7eb; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.office-module .sheet table { width: 100%; border-collapse: collapse; background: #ffffff; border: 1px solid #e5e7eb; }
.office-module .sheet td { border: 1px solid #e5e7eb; padding: 6px 8px; min-width: 80px; outline: none; }
.office-module .viewer iframe { width: 100%; height: 560px; border: 0; background: #ffffff; }
.office-module a { color: #2563eb; text-decoration: none; }
.office-module a:hover { text-decoration: underline; }

/* Gestión */
.office-module .docs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; }
.office-module .doc-item { text-align: left; background: #ffffff; border: 1px solid #e5e7eb; color: #111; padding: 10px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.office-module .doc-item:hover { border-color: #cbd5e1; background: #f8fafc; }
.office-module .doc-name { font-weight: 600; }
.office-module .doc-type { color: #6b7280; font-size: 12px; margin-left: 8px; }
.office-module .docs-viewer { border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px; background: #ffffff; min-height: 220px; }
.office-module .docs-viewer .placeholder { color: #6b7280; font-size: 14px; }
.office-module .viewer-frame { width: 100%; height: 520px; border: 0; background: #ffffff; }
.office-module .image-view-wrap { display: flex; align-items: center; justify-content: center; background: #ffffff; }
.office-module .image-view-wrap img { max-width: 100%; height: auto; display: block; }
.office-module .text-view { white-space: pre-wrap; color: #111; background: #ffffff; padding: 10px; border-radius: 6px; border: 1px solid #e5e7eb; }
.office-module .fallback { padding: 12px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; }
.office-module .fallback .actions { margin-top: 8px; display: flex; gap: 8px; }
.office-module .btn { display: inline-block; padding: 8px 12px; border-radius: 6px; border: 1px solid #e5e7eb; color: #111; background: #ffffff; }
.office-module .btn.secondary { background: #f8fafc; }
.office-module .empty { color: #6b7280; }

/* Params (Samples) */
.office-module .samples-params { border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px; background: #ffffff; margin-bottom: 12px; }
.office-module .params-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.office-module .params-sample-name { color: #6b7280; font-size: 13px; }
.office-module #samplesParamsForm { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 8px; }
.office-module .param-field { display: flex; flex-direction: column; gap: 6px; }
.office-module .param-field label { font-size: 13px; color: #374151; }
.office-module .param-field input[type="text"],
.office-module .param-field input[type="number"] { padding: 6px 8px; border: 1px solid #e5e7eb; border-radius: 6px; }
.office-module .params-actions { display: flex; gap: 8px; margin-bottom: 6px; }