/* Widget de tickets iTop. * * Reglas de este archivo: * * 1. Todo va prefijado con .tw- para no chocar con el sitio anfitrion. * * 2. TODO el color sale de una variable. Los bloques de tema redefinen * variables y nada mas: nunca vuelven a declarar el color de un componente. * Redeclarar componentes por tema es como se cuela el clasico bug de "texto * blanco sobre fondo blanco", porque `input` pierde en especificidad contra * `input[type="text"]`. Con variables ese problema no puede existir. * * 3. El tema se resuelve por atributo `data-theme` en , que pone el JS: * light | dark. Un widget embebido no puede decidir el tema por su cuenta, * porque no sabe como es la pagina que lo contiene. */ /* ========================================================================== Tokens ========================================================================== */ :root { /* Acento: lo sobrescribe el JS con el color configurado en el backend. */ --tw-accent: #2563eb; /* El acento usado como TEXTO necesita 4.5:1 contra el fondo; como fondo de boton le alcanza 3:1. En tema claro coinciden, en oscuro no. */ --tw-accent-text: #2563eb; --tw-accent-hover: #1d4ed8; --tw-accent-soft: rgba(37, 99, 235, .10); --tw-accent-ring: rgba(37, 99, 235, .22); --tw-on-accent: #ffffff; /* Superficies, de la mas baja a la mas alta. */ --tw-bg: #ffffff; --tw-surface: #f7f8fa; --tw-surface-hi: #ffffff; --tw-field: #ffffff; /* --tw-border es decorativo (separadores). --tw-border-strong delimita controles y por eso cumple el 3:1 de WCAG 1.4.11. */ --tw-border: #e4e7ec; --tw-border-strong: #8a94a6; --tw-text: #101828; --tw-text-soft: #475467; /* 4.68:1 sobre --tw-surface, el peor caso donde se usa. */ --tw-text-faint: #667085; --tw-danger: #b42318; --tw-danger-soft: #fef3f2; --tw-danger-line: #fecdca; --tw-warn: #b54708; --tw-warn-soft: #fffaeb; --tw-warn-line: #fedf89; --tw-ok: #067647; --tw-ok-soft: #ecfdf3; --tw-ok-line: #abefc6; --tw-info: #175cd3; --tw-info-soft: #eff8ff; --tw-info-line: #b2ddff; --tw-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --tw-shadow: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04); --tw-shadow-lg: 0 8px 24px rgba(16, 24, 40, .10); --tw-r-sm: 8px; --tw-r: 10px; --tw-r-lg: 14px; --tw-r-xl: 18px; --tw-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; color-scheme: light; } :root[data-theme="dark"] { --tw-accent-text: #60a5fa; --tw-accent-soft: rgba(96, 165, 250, .14); --tw-accent-ring: rgba(96, 165, 250, .30); --tw-bg: #0d1117; --tw-surface: #161b22; --tw-surface-hi: #1c2129; --tw-field: #10151c; --tw-border: #262c36; --tw-border-strong: #606c7e; --tw-text: #e6edf3; --tw-text-soft: #9aa5b1; --tw-text-faint: #828e9b; --tw-danger: #ff8080; --tw-danger-soft: #2a1315; --tw-danger-line: #5a2326; --tw-warn: #f5c469; --tw-warn-soft: #2a2011; --tw-warn-line: #5a4420; --tw-ok: #5fd8a0; --tw-ok-soft: #0f2620; --tw-ok-line: #1f5442; --tw-info: #85c3ff; --tw-info-soft: #101f33; --tw-info-line: #1f3f66; --tw-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --tw-shadow: 0 1px 3px rgba(0, 0, 0, .5); --tw-shadow-lg: 0 10px 30px rgba(0, 0, 0, .55); color-scheme: dark; } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--tw-bg); color: var(--tw-text); font-family: var(--tw-font); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .tw-hidden { display: none !important; } .tw-app { display: flex; flex-direction: column; min-height: 100vh; max-width: 680px; margin: 0 auto; position: relative; } /* Incrustado en la pagina: el iframe se ajusta al alto del contenido, asi que el widget no debe estirarse al alto del viewport. En la burbuja flotante si queremos que llene el panel. */ .tw-embed-inline .tw-app { min-height: 0; } .tw-embed-inline, .tw-embed-inline body { height: auto; } /* Portal propio (no embebido). En pantallas anchas, una tarjeta centrada sobre la superficie; en el movil ocupa todo, como el panel. */ @media (min-width: 760px) { /* En y no solo en body: el fondo del viewport sale de cuando este lo declara, y body es mas corto que la pantalla. */ .tw-standalone, .tw-standalone body { background: var(--tw-surface); } .tw-standalone .tw-app { min-height: 0; margin: 40px auto; background: var(--tw-bg); border: 1px solid var(--tw-border); border-radius: var(--tw-r-xl); box-shadow: var(--tw-shadow-lg); overflow: hidden; } } :focus-visible { outline: 2px solid var(--tw-accent); outline-offset: 2px; border-radius: 4px; } /* ========================================================================== Header / footer ========================================================================== */ .tw-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--tw-border); background: var(--tw-bg); } .tw-header-main { min-width: 0; display: flex; align-items: center; gap: 10px; } /* El logo lo pone quien instala el widget. Alto acotado y `contain` para que cualquier proporcion entre sin deformarse ni romper la cabecera. */ .tw-logo { height: 28px; max-width: 150px; object-fit: contain; display: block; flex: none; } .tw-header-text { min-width: 0; } .tw-header h1 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--tw-text); } .tw-header p { margin: 2px 0 0; font-size: 12.5px; color: var(--tw-text-soft); } .tw-body { flex: 1; padding: 22px; } .tw-footer { padding: 12px 22px 18px; font-size: 11.5px; color: var(--tw-text-faint); } /* ========================================================================== Botones ========================================================================== */ button, input, textarea, select { font: inherit; } .tw-primary, a.tw-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 18px; border: 1px solid transparent; border-radius: var(--tw-r); background: var(--tw-accent); color: var(--tw-on-accent); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: var(--tw-shadow-sm); transition: background .15s ease, box-shadow .15s ease, transform .08s ease; } /* El margen lo pone el contexto, no el componente: un boton que arrastra espaciado obliga a anularlo en cada uso distinto. */ form .tw-primary { margin-top: 18px; } .tw-primary:hover, a.tw-primary:hover { background: var(--tw-accent-hover); } .tw-primary:active { transform: translateY(1px); } .tw-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; } .tw-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; border: 1px solid var(--tw-border-strong); border-radius: var(--tw-r); background: var(--tw-surface-hi); color: var(--tw-text); font-size: 13.5px; font-weight: 550; cursor: pointer; box-shadow: var(--tw-shadow-sm); transition: background .15s ease, border-color .15s ease; } .tw-secondary:hover { background: var(--tw-surface); border-color: var(--tw-text-faint); } .tw-secondary:disabled { opacity: .5; cursor: not-allowed; } /* Los objetivos tactiles llegan a 44px con padding, sin agrandar el texto. */ .tw-ghost { display: inline-flex; align-items: center; min-height: 44px; border: 0; background: none; color: var(--tw-text-soft); font-size: 12.5px; cursor: pointer; padding: 5px 10px; margin: -5px -10px -5px 0; border-radius: var(--tw-r-sm); } .tw-ghost:hover { color: var(--tw-text); background: var(--tw-surface); } .tw-back { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; margin: -10px 0 2px -10px; padding: 0 10px; border: 0; background: none; color: var(--tw-text-soft); font-size: 13px; font-weight: 500; cursor: pointer; border-radius: var(--tw-r-sm); } .tw-back:hover { color: var(--tw-accent-text); } /* ========================================================================== Inicio ========================================================================== */ .tw-choice-grid { display: grid; gap: 10px; } .tw-choice { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; width: 100%; text-align: left; padding: 16px 18px; border: 1px solid var(--tw-border); border-radius: var(--tw-r-lg); background: var(--tw-surface-hi); cursor: pointer; box-shadow: var(--tw-shadow-sm); transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; } .tw-choice:hover { border-color: var(--tw-accent); box-shadow: var(--tw-shadow); transform: translateY(-1px); } .tw-choice:active { transform: none; } .tw-choice-icon { grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: var(--tw-accent-soft); color: var(--tw-accent-text); font-size: 18px; line-height: 1; } .tw-choice-title { font-weight: 600; font-size: 14.5px; color: var(--tw-text); } .tw-choice-desc { font-size: 12.5px; color: var(--tw-text-soft); line-height: 1.45; } /* ========================================================================== Formularios ========================================================================== */ h2 { font-size: 17px; font-weight: 620; letter-spacing: -.01em; margin: 0 0 6px; color: var(--tw-text); } label { display: block; font-size: 12.5px; font-weight: 600; color: var(--tw-text); margin: 16px 0 6px; } .tw-req { color: var(--tw-danger); font-weight: 400; } /* Un campo opcional que no lo dice se lee como obligatorio. */ .tw-optional { color: var(--tw-text-faint); font-weight: 400; font-size: 11.5px; text-transform: lowercase; } input[type="text"], input[type="email"], textarea, select { width: 100%; padding: 10px 13px; border: 1px solid var(--tw-border-strong); border-radius: var(--tw-r); font-size: 14px; color: var(--tw-text); background: var(--tw-field); box-shadow: var(--tw-shadow-sm); transition: border-color .15s ease, box-shadow .15s ease; } select { /* Flecha propia: la nativa no sigue el tema en varios navegadores. */ appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 19px) 51%, calc(100% - 14px) 51%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; } select:disabled { opacity: .55; cursor: not-allowed; } input::placeholder, textarea::placeholder { color: var(--tw-text-faint); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--tw-accent); box-shadow: 0 0 0 3.5px var(--tw-accent-ring); } input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--tw-danger); } textarea { resize: vertical; min-height: 92px; line-height: 1.55; } input[type="file"] { width: 100%; font-size: 12.5px; color: var(--tw-text-soft); padding: 9px 0; } input[type="file"]::file-selector-button { margin-right: 10px; padding: 7px 13px; border: 1px solid var(--tw-border-strong); border-radius: var(--tw-r-sm); background: var(--tw-surface-hi); color: var(--tw-text); font-size: 12.5px; font-weight: 550; cursor: pointer; } input[type="file"]::file-selector-button:hover { background: var(--tw-surface); } .tw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .tw-row > div > label:first-child { margin-top: 16px; } /* La fila de servicio y categoria: si el catalogo esconde una de las dos, la otra ocupa todo el ancho en vez de quedar a la mitad. */ .tw-row-services:has(> .tw-hidden) { grid-template-columns: 1fr; } .tw-help { font-size: 12.5px; color: var(--tw-text-soft); margin: 7px 0 0; line-height: 1.5; } .tw-help a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--tw-accent-text); font-weight: 600; } .tw-center { text-align: center; margin-top: 18px; } /* ========================================================================== Alertas ========================================================================== */ .tw-alert { display: flex; gap: 9px; margin: 14px 22px 0; padding: 11px 14px; border: 1px solid transparent; border-radius: var(--tw-r); font-size: 13px; line-height: 1.5; } .tw-alert::before { font-weight: 700; flex: none; } .tw-alert-error { background: var(--tw-danger-soft); color: var(--tw-danger); border-color: var(--tw-danger-line); } .tw-alert-error::before { content: "!"; } .tw-alert-success { background: var(--tw-ok-soft); color: var(--tw-ok); border-color: var(--tw-ok-line); } .tw-alert-success::before { content: "\2713"; } .tw-alert-info { background: var(--tw-info-soft); color: var(--tw-info); border-color: var(--tw-info-line); } .tw-alert-info::before { content: "i"; } /* ========================================================================== Listado ========================================================================== */ .tw-list-head { margin-bottom: 16px; } .tw-list-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .tw-filters { display: inline-flex; gap: 2px; padding: 3px; background: var(--tw-surface); border: 1px solid var(--tw-border); border-radius: var(--tw-r); } .tw-filter { border: 0; background: none; padding: 5px 13px; border-radius: 7px; font-size: 12.5px; font-weight: 550; color: var(--tw-text-soft); cursor: pointer; transition: background .12s ease, color .12s ease; } .tw-filter:hover { color: var(--tw-text); } .tw-filter-active { background: var(--tw-surface-hi); color: var(--tw-text); box-shadow: var(--tw-shadow-sm); } .tw-tickets { display: flex; flex-direction: column; gap: 9px; } .tw-ticket { display: block; width: 100%; text-align: left; padding: 15px 16px; border: 1px solid var(--tw-border); border-radius: var(--tw-r-lg); background: var(--tw-surface-hi); cursor: pointer; box-shadow: var(--tw-shadow-sm); transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; } .tw-ticket:hover { border-color: var(--tw-border-strong); box-shadow: var(--tw-shadow); transform: translateY(-1px); } .tw-ticket-top { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; flex-wrap: wrap; } /* Es el dato que la persona tiene que conservar para volver a entrar: merece el mismo peso visual que el titulo, no el de un metadato. */ .tw-ticket-ref { font-size: 13px; font-weight: 680; color: var(--tw-text); letter-spacing: .02em; font-variant-numeric: tabular-nums; } .tw-ticket-title { font-weight: 600; font-size: 14.5px; line-height: 1.4; margin: 0 0 6px; color: var(--tw-text); } .tw-ticket-meta { font-size: 12px; color: var(--tw-text-soft); } /* Badges de estado, con punto de color al frente. */ .tw-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border: 1px solid transparent; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; } .tw-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .tw-badge-open { background: var(--tw-info-soft); color: var(--tw-info); border-color: var(--tw-info-line); } .tw-badge-pending { background: var(--tw-warn-soft); color: var(--tw-warn); border-color: var(--tw-warn-line); } .tw-badge-resolved { background: var(--tw-ok-soft); color: var(--tw-ok); border-color: var(--tw-ok-line); } .tw-badge-closed { background: var(--tw-surface); color: var(--tw-text-soft); border-color: var(--tw-border); } /* Version liviana para "todavia no hay nada" dentro del detalle: la caja grande gastaba 111px en decir que no habia nada y empujaba las acciones fuera de la pantalla en movil. */ .tw-empty-inline { padding: 2px 0 4px; color: var(--tw-text-soft); font-size: 13px; } .tw-empty { text-align: center; padding: 44px 20px; border: 1px dashed var(--tw-border-strong); border-radius: var(--tw-r-lg); color: var(--tw-text-soft); font-size: 13.5px; background: var(--tw-surface); } /* ========================================================================== Detalle ========================================================================== */ .tw-detail-head { padding: 16px 18px; border: 1px solid var(--tw-border); border-radius: var(--tw-r-lg); background: var(--tw-surface); margin-bottom: 4px; } .tw-detail-head h2 { margin: 8px 0 0; font-size: 16.5px; line-height: 1.4; } .tw-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--tw-border); } .tw-detail-item .tw-k { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--tw-text-faint); margin-bottom: 2px; } .tw-detail-item .tw-v { font-size: 13px; color: var(--tw-text); } .tw-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tw-text-faint); margin: 22px 0 9px; } .tw-prose { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.6; color: var(--tw-text); background: var(--tw-surface); border: 1px solid var(--tw-border); border-radius: var(--tw-r); padding: 13px 15px; } /* Conversacion */ .tw-log { display: flex; flex-direction: column; gap: 4px; } .tw-log-entry { display: grid; grid-template-columns: 30px 1fr; column-gap: 11px; padding: 11px 0; } .tw-log-entry + .tw-log-entry { border-top: 1px solid var(--tw-border); } .tw-log-avatar { grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 650; background: var(--tw-surface); border: 1px solid var(--tw-border); color: var(--tw-text-soft); flex: none; } .tw-log-entry-own .tw-log-avatar { background: var(--tw-accent-soft); border-color: transparent; color: var(--tw-accent-text); } .tw-log-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; } .tw-log-author { font-size: 13px; font-weight: 600; color: var(--tw-text); } .tw-log-date { font-size: 11.5px; color: var(--tw-text-faint); } .tw-log-msg { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.55; color: var(--tw-text-soft); } /* Adjuntos */ .tw-files { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; } .tw-files li { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border: 1px solid var(--tw-border); border-radius: var(--tw-r); background: var(--tw-surface-hi); font-size: 13px; } .tw-file-icon { width: 26px; height: 26px; border-radius: var(--tw-r-sm); background: var(--tw-accent-soft); color: var(--tw-accent-text); display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; } .tw-files a { color: var(--tw-text); text-decoration: none; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .tw-files a:hover { color: var(--tw-accent-text); text-decoration: underline; } .tw-file-size { color: var(--tw-text-faint); font-size: 11.5px; flex: none; } .tw-upload-block { margin-top: 12px; } .tw-upload-list { list-style: none; padding: 0; margin: 10px 0 0; font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; } .tw-upload-ok { color: var(--tw-ok); } .tw-upload-fail { color: var(--tw-danger); } .tw-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } /* ========================================================================== Exito ========================================================================== */ .tw-success { text-align: center; padding: 10px 0 4px; } .tw-success-icon { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--tw-ok-soft); border: 1px solid var(--tw-ok-line); color: var(--tw-ok); font-size: 24px; } .tw-ref-box { margin: 16px auto; padding: 16px 18px; max-width: 300px; border: 1px solid var(--tw-border-strong); border-radius: var(--tw-r-lg); background: var(--tw-surface); box-shadow: var(--tw-shadow-sm); } .tw-ref-label { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--tw-text-faint); margin-bottom: 5px; } .tw-ref-value { display: block; font-size: 25px; font-weight: 680; letter-spacing: .03em; color: var(--tw-accent-text); font-variant-numeric: tabular-nums; } .tw-success-title { font-size: 13.5px; color: var(--tw-text-soft); margin: 0; } .tw-success-actions { display: flex; flex-direction: column; gap: 9px; margin: 20px 0 4px; } .tw-success-actions .tw-primary { margin-top: 0; } .tw-success-actions .tw-secondary { width: 100%; padding: 11px 18px; } .tw-success .tw-upload-block { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--tw-border); text-align: left; } /* ========================================================================== Loading ========================================================================== */ .tw-loading { position: absolute; inset: 0; background: color-mix(in srgb, var(--tw-bg) 72%, transparent); display: flex; align-items: center; justify-content: center; z-index: 20; } @supports not (background: color-mix(in srgb, red 50%, blue)) { .tw-loading { background: var(--tw-bg); opacity: .78; } } .tw-spinner { width: 28px; height: 28px; border: 2.5px solid var(--tw-border-strong); border-top-color: var(--tw-accent); border-radius: 50%; animation: tw-spin .7s linear infinite; } @keyframes tw-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: 1.5s !important; } .tw-choice:hover, .tw-ticket:hover { transform: none; } } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 540px) { .tw-header { padding: 16px 16px; } .tw-body { padding: 16px; } .tw-alert { margin: 12px 16px 0; } .tw-footer { padding: 10px 16px 16px; } .tw-row { grid-template-columns: 1fr; gap: 0; } .tw-list-actions { flex-direction: column; align-items: stretch; } .tw-filters { justify-content: space-between; } .tw-filter { flex: 1; } .tw-ref-value { font-size: 21px; } } /* ========================================================================== Modo panel (burbuja flotante y ventana): el alto esta acotado, asi que el alta tiene que entrar entera sin scroll. Misma jerarquia, menos aire. ========================================================================== */ .tw-embed-panel .tw-header { padding: 14px 18px; } .tw-embed-panel .tw-header h1 { font-size: 15px; } .tw-embed-panel .tw-header p { font-size: 12px; } .tw-embed-panel .tw-body { padding: 12px 18px 16px; } .tw-embed-panel .tw-footer { padding: 6px 18px 10px; } .tw-embed-panel .tw-back { min-height: 36px; margin: -4px 0 0 -8px; padding: 0 8px; } .tw-embed-panel h2 { font-size: 16px; margin-bottom: 2px; } .tw-embed-panel label { margin: 10px 0 5px; font-size: 12px; } .tw-embed-panel .tw-row { gap: 10px; } .tw-embed-panel .tw-row > div > label:first-child { margin-top: 10px; } .tw-embed-panel input[type="text"], .tw-embed-panel input[type="email"], .tw-embed-panel select { padding: 8px 12px; font-size: 13.5px; } .tw-embed-panel textarea { padding: 8px 12px; font-size: 13.5px; min-height: 78px; } .tw-embed-panel .tw-help { margin-top: 4px; font-size: 12px; } .tw-embed-panel textarea#create-description { min-height: 70px; } /* En pantallas angostas las filas vuelven a una columna (ver media query), asi que el email no queda apretado en el celular. */ .tw-embed-panel form .tw-primary { margin-top: 14px; padding-top: 11px; padding-bottom: 11px; } /* El panel mide 400 px, o sea que cae dentro de la media query de arriba y las filas se apilarian: aca se mantienen las dos columnas, que es lo que hace que el alta entre sin scroll. Solo en celulares muy angostos ceden. */ .tw-embed-panel .tw-row { grid-template-columns: 1fr 1fr; gap: 10px; } .tw-embed-panel .tw-row-services:has(> .tw-hidden) { grid-template-columns: 1fr; } @media (max-width: 360px) { .tw-embed-panel .tw-row { grid-template-columns: 1fr; gap: 0; } }