/* Réplica del aspecto actual de Citayapp (Angular Material + Tailwind) */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: Roboto, "Helvetica Neue", sans-serif; color: rgba(0,0,0,.87); background: #fff; font-size: 14px; }
a { color: #D56066; text-decoration: none; }
.primary { color: #D56066; }

/* Barra superior */
.topbar { height: 70px; display: flex; align-items: center; gap: 16px; padding-left: 16px; box-shadow: 0 2px 6px rgba(0,0,0,.12); position: relative; z-index: 2; background: #fff; }
.topbar .fa-bars { color: #D56066; font-size: 20px; cursor: pointer; }
.logo { font-family: "Playfair Display", serif; font-style: italic; font-size: 26px; color: #D56066; letter-spacing: .5px; }
.logo small { display: block; font-family: Roboto, sans-serif; font-style: normal; font-size: 9px; letter-spacing: 4px; color: #888; margin-top: -4px; }

/* Contenido */
.page { max-width: 1200px; margin: 0 auto; padding: 16px; }
.block { background: #fff; border-radius: 8px; padding: 16px; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
.block-title { color: #D56066; font-size: 36px; font-weight: 100; text-transform: uppercase; margin: 8px 0 12px; }

/* Botones */
.btn-primary { height: 42px; width: 200px; border: 0; border-radius: 6px; background: #D56066; color: #fff; font: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.btn-primary.dense { height: 34px; width: 100px; font-size: 13px; }
.btn-stroked { height: 36px; padding: 0 16px; border: 1px solid #ccc; border-radius: 4px; background: #fff; color: #D56066; font: 500 14px Roboto, sans-serif; letter-spacing: 1px; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: #333; display: inline-flex; align-items: center; justify-content: center; }

/* Campos tipo Material */
.mf-outline { position: relative; border: 1px solid rgba(0,0,0,.38); border-radius: 4px; height: 40px; display: flex; align-items: center; padding: 0 12px; min-width: 160px; background: #fff; color: rgba(0,0,0,.87); }
.mf-outline label { position: absolute; top: -8px; left: 8px; background: #fff; padding: 0 4px; font-size: 11px; color: rgba(0,0,0,.6); }
.mf-outline .suffix { margin-left: auto; color: rgba(0,0,0,.54); }
.mf-fill { background: #f5f5f5; border-bottom: 1px solid rgba(0,0,0,.42); border-radius: 4px 4px 0 0; height: 48px; padding: 6px 12px 0; min-width: 180px; position: relative; }
.mf-fill label { display: block; font-size: 11px; color: rgba(0,0,0,.6); }
.mf-fill span { font-size: 15px; }
.mf-fill .caret { position: absolute; right: 12px; top: 18px; color: rgba(0,0,0,.54); }

/* Checkbox */
.cb { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.cb i { width: 18px; height: 18px; border: 2px solid rgba(0,0,0,.54); border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; font-style: normal; }
.cb i.on { background: #D56066; border-color: #D56066; }

/* Tablas */
table.global { width: 100%; border-collapse: collapse; }
table.global th { padding: 12px 20px; border-bottom: 2px solid #e5e7eb; background: #f3f4f6; text-align: left; font-size: 12px; font-weight: 600; color: #4b5563; text-transform: uppercase; }
table.global td { padding: 12px 20px; border-bottom: 1px solid #e5e7eb; background: #fff; font-size: 14px; }
table.global .r { text-align: right; }

.paginator { display: flex; justify-content: flex-end; align-items: center; gap: 24px; font-size: 12px; color: rgba(0,0,0,.6); padding: 8px 0; }